Jak dodać opcje do DropDownList za pomocą jQuery?

Bez wtyczek, może to być łatwiejsze bez użycia jak największej ilości jQuery, zamiast tego będzie nieco bardziej oldskulowe:

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

Jeśli chcesz określić, czy opcja a) jest domyślną wartością, a b) powinna być wybrana teraz, możesz przekazać dwa dodatkowe parametry:

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

Z pluginem: pole wyboru jQuery . Możesz to zrobić:

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

Możesz najpierw wyczyścić listę rozwijaną $('#DropDownQuality').pusty();

Mój kontroler w MVC zwrócił listę select z tylko jednym elementem.

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

Dodaj element do listy na początku

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

Dodaj element do listy na końcu

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

Common Dropdown operation (Get, Set, Add, Remove) using jQuery

Pease note rozwiązanie @ Phrogz nie działa w IE 8, podczas gdy @nickf działa we wszystkich głównych przeglądarkach. Inne podejście to:

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

U można użyć bezpośredniego

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

- > Tutaj można użyć bezpośredniego ciągu

A także używać .prepend (), aby dodać opcję do początku listy opcji. http://api.jquery.com/prepend/

Używając jquery możesz użyć

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

Gdzie " myid " jest id listy rozwijanej, a newvalue jest tekstem, który chcesz wstawić..

Musiałem dodać tyle opcji do rozwijanych, ile było rozwijanych na mojej stronie. Więc użyłem go w ten sposób:

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++;
    });
});

To dynamicznie ustawia listy rozwijane o wartościach od 1 do n i automatycznie wybiera wartość dla kolejności, w jakiej była rozwijana (tzn. 2. rozwijane ma "2" w polu, itd.).

To było śmieszne, że nie mogłem użyć this lub this.Object lub $.obj lub czegoś podobnego w moim 2nd .each(), chociaż - - - właściwie musiałem uzyskać konkretny ID tego obiektu, a następnie chwyć i przekaż cały obiekt do mojej funkcji, zanim się dopisze. Na szczęście identyfikator mojego rozwijanego menu został oddzielony przez " _ " i mogłem go złapać. Nie czuję, że powinienem był, ale to ciągle dawało mi wyjątki jQuery inaczej. Coś, co inni zmagają się z tym, czym byłem, może cieszyć się wiedzą.

Spróbuj tej funkcji:

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