Jak dodać opcje do DropDownList za pomocą jQuery?

Jak mówi pytanie, jak dodać nową opcję do DropDownList za pomocą jQuery?

Dzięki

Bez użycia dodatkowych wtyczek,

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

Jeśli masz wiele opcji lub ten kod musiał być uruchamiany bardzo często, powinieneś rozważyć użycie DocumentFragment zamiast wielokrotnie niepotrzebnie modyfikować DOM. Tylko dla kilku opcji powiedziałbym, że nie warto.

------------------------------- Dodany ------------------ --------------

DocumentFragmentjest dobrą opcją dla zwiększenia prędkości, ale nie możemy utworzyć elementu opcji przy użyciu, document.createElement('option')ponieważ IE6 i IE7 go nie obsługują.

Co możemy zrobić, to utworzyć nowy element select, a następnie dołączyć wszystkie opcje. Po zakończeniu pętli dołącz ją do rzeczywistego obiektu DOM.

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());

W ten sposób zmodyfikujemy DOM tylko raz!

Bez wtyczek może to być łatwiejsze bez użycia tak dużej ilości jQuery, zamiast nieco więcej starej szkoły:

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ślnie wybraną wartością, a b) powinna być teraz wybrana, możesz przekazać jeszcze dwa parametry:

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

Dzięki wtyczce: jQuery Selection Box . 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ć DropDown $ ('# DropDownQuality'). Empty ();

Mój kontroler w MVC zwrócił listę wyboru zawierającą tylko jeden element.

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

Na początku dodaj pozycję do listy

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

Dodaj pozycję do listy na końcu

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

Typowa operacja rozwijania (Pobierz, Ustaw, Dodaj, Usuń) za pomocą jQuery

Uwaga Pease @ Rozwiązanie Phrogza nie działa w IE 8, podczas gdy @ nickf działa we wszystkich głównych przeglądarkach. Innym podejściem jest:

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

Możesz używać bezpośrednio

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

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

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

używając jquery, której możesz użyć

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

gdzie „ myid ” to identyfikator listy rozwijanej, a nowa wartość to tekst, który chcesz wstawić.

Musiałem dodać tyle opcji do menu rozwijanych, ile było ich na mojej stronie. 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 konfigurowało listy rozwijane z wartościami od 1 do n i automatycznie wybierało wartość dla kolejności, w jakiej znajdowało się menu rozwijane (tj. Drugie menu zawierało „2” w polu itp.).

To było śmieszne, że nie mogę używać thislub this.Objectlub $.objlub coś podobnego w moim 2nd .each(), choć --- I rzeczywiście było uzyskać identyfikator specyficzny tego obiektu, a następnie pobrać i przekazać, że cały obiekt do mojej funkcji przed byłoby dołączyć. Na szczęście ID mojej listy rozwijanej było oddzielone znakiem „_” i mogłem je zdobyć. Nie sądzę, że powinienem był to zrobić, ale w przeciwnym razie dawało mi to wyjątki jQuery. Coś, co walczyło z tym, czym byłem, może cieszyć się wiedząc.

Pomyślmy, że twoją odpowiedzią jest „successData”. Zawiera listę, którą należy dodać jako opcje w menu rozwijanym.

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

To by działało dla ciebie ....

spróbuj tej funkcji:

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