Come faccio ad aggiungere opzioni a un DropDownList usando jQuery?

Come dice la domanda, come posso aggiungere una nuova opzione a un DropDownList usando jQuery?

Grazie

Senza utilizzare plugin aggiuntivi,

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
});

Se avevi molte opzioni, o questo codice doveva essere eseguito molto frequentemente, allora dovresti esaminare un DocumentFragment invece di modificare il DOM molte volte inutilmente. Solo per una manciata di opzioni, direi che non ne vale la pena però.

------------------------------- Aggiunto ------------------ --------------

DocumentFragmentè una buona opzione per il miglioramento della velocità, ma non possiamo creare un elemento opzione usando document.createElement('option')IE6 e IE7 non lo supportano.

Quello che possiamo fare è creare un nuovo elemento select e quindi aggiungere tutte le opzioni. Al termine del ciclo, aggiungerlo all'oggetto DOM effettivo.

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
    _select.append(
            $('<option></option>').val(val).html(text)
        );
});
$('#mySelect').append(_select.html());

In questo modo modificheremo DOM per una sola volta!

Senza plug-in, questo può essere più semplice senza usare troppi jQuery, invece andare leggermente più vecchio stile:

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
$.each(myOptions, function(val, text) {
    $('#mySelect').append( new Option(text,val) );
});

Se si desidera specificare se l'opzione a) è il valore selezionato di default e b) deve essere selezionato ora, è possibile passare altri due parametri:

    var defaultSelected = false;
    var nowSelected     = true;
    $('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );

Con il plug-in: jQuery Selection Box . Puoi farlo:

var myOptions = {
        "Value 1" : "Text 1",
        "Value 2" : "Text 2",
        "Value 3" : "Text 3"
    }
    $("#myselect2").addOption(myOptions, false); 

Potresti voler cancellare DropDown prima $ ('# DropDownQuality'). Empty ();

Ho avuto il mio controller in MVC restituire un elenco di selezione con un solo elemento.

$('#DropDownQuality').append(
        $('<option></option>').val(data[0].Value).html(data[0].Text));    

Aggiungi l'elemento all'elenco all'inizio

$("#ddlList").prepend('<option selected="selected" value="0"> Select </option>');

Aggiungi elemento alla lista alla fine

$('<option value="6">Java Script</option>').appendTo("#ddlList");

Operazione a discesa comune (Ottieni, Imposta, Aggiungi, Rimuovi) utilizzando jQuery

Si prega di notare che la soluzione di @ Phrogz non funziona in IE 8 mentre quella di @ nickf funziona in tutti i principali browser. Un altro approccio è:

$.each(myOptions, function(val, text) {
    $("#mySelect").append($("<option/>").attr("value", val).text(text));
});

Puoi usare direttamente

$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")

-> Qui puoi usare la stringa diretta

Inoltre, usa .prepend () per aggiungere l'opzione all'inizio dell'elenco delle opzioni. http://api.jquery.com/prepend/

usando jquery puoi usare

      this.$('select#myid').append('<option>newvalue</option>');

dove " myid " è l' id dell'elenco a discesa e newvalue è il testo che si desidera inserire.

Avevo bisogno di aggiungere tante opzioni ai menu a discesa quanti erano i menu a discesa sulla mia pagina. Quindi l'ho usato in questo modo:

function myAppender(obj, value, text){
    obj.append($('<option></option>').val(value).html(text));
}

$(document).ready(function() {
    var counter = 0;
    var builder = 0;
    // Get the number of dropdowns
    $('[id*="ddlPosition_"]').each(function() {
        counter++;
    });

    // Add the options for each dropdown
    $('[id*="ddlPosition_"]').each(function() {
        var myId = this.id.split('_')[1];

        // Add each option in a loop for the specific dropdown we are on
        for (var i=0; i<counter; i++) {
            myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1);
        }
        $('[id*="ddlPosition_'+myId+'"]').val(builder);
        builder++;
    });
});

Ciò imposta dinamicamente i menu a discesa con valori come da 1 a n e seleziona automaticamente il valore per l'ordine in cui si trovava il menu a discesa (ovvero il 2 ° menu a discesa ha "2" nella casella, ecc.).

Era ridicolo che non potessi usare thiso this.Objecto $.objqualcosa del genere nel mio secondo .each(), tuttavia --- dovevo effettivamente ottenere l'ID specifico di quell'oggetto e quindi afferrare e passare l'intero oggetto alla mia funzione prima che si accodasse. Fortunatamente l'ID del mio menu a discesa è stato separato da un "_" e ho potuto afferrarlo. Non credo che avrei dovuto farlo, ma altrimenti continuavo a darmi eccezioni jQuery. Qualcos'altro alle prese con quello che ero potrebbe piacere sapere.

Supponiamo che la tua risposta sia "successData". Questo contiene un elenco che è necessario aggiungere come opzioni in un menu a discesa.

success: function (successData) {
var sizeOfData = successData.length;
if (sizeOfData == 0) {
    //    NO DATA, throw an alert ...
    alert ("No Data Found");
} else {
    $.each(successData, function(val, text) {
        mySelect.append(
            $('<option></option>').val(val).html(text)
        );
    });
} }

Questo funzionerebbe per te ....

prova questa funzione:

function addtoselect(param,value){
    $('#mySelectBox').append('<option value='+value+'>'+param+'</option>');
}