Jak dodać opcje do DropDownList za pomocą jQuery?


291

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

Dzięki


Ciekawe, dlaczego to pytanie zostało odrzucone? Prawdopodobnie dlatego, że nie pokazuje żadnego fragmentu kodu :)
shasi kanth

Odpowiedzi:


451

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!


8
Parametry metody są nieco mylące, na przykład funkcją (val, text) powinna być funkcja (indeks, opcja). Działa dobrze inaczej.
mbillard

14
@ Crossbrowser: Nie zgadzam się - vali textfaktycznie opisuję zmienne i ich użycie.
nickf

1
tylko dla tego przykładu, jednak jako metoda ogólnego przeznaczenia, te zmienne wprowadzają w błąd (nie dało mi to pojęcia, jak użyć tej metody). Dam jednak, że odpowiedź nie dotyczyła użycia metody $ .each.
mbillard

1
Wcześniej korzystałem mySelect.append(new Option(text, val));, co nie działało w IE8. Musiałem przejść na @ nickf'smySelect.append($('<option></option>').val(val).html(text));
Matthew Clark,

5
@briansol:.attr('selected', true|false)
nickf

167

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

1
Jak ustawić właściwości, takie jak wybranie wartości domyślnej?
Krishnan,

20
Ten bardziej mi się podoba niż "<option></option>"metoda; to wydaje się brudne.
Josh M.

1
nie działa w ie8 .. właśnie wypróbowałem i zobaczyłem kolejny komentarz na ten temat poniżej.
briansol

13

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

11

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

7

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


1
Jeśli użyjesz podwójnych cudzysłowów w parametrach opcji, zamkną one funkcję i złamią skrypt. Zmiana .prepend("...") / $("...")na .prepend('...') / $('...')naprawiłaby fragment kodu.
Heraldmonkey

4

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($("&lt;option/&gt;").attr("value", val).text(text));
});

3

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



0

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ć.


0

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.


Dlaczego zwiększasz licznik w każdym z nich? Czy jesteś nowy w jquery? var counter = $ ('[id * = "ddlPosition _"]'). długość jest mniej szczegółowa i bardziej wydajna. Myślę, że potrzebujesz trochę więcej doświadczenia, zanim zaczniesz publikować swój kod. To nie jest kod jakości produkcji, ponieważ jest źle napisany i zbyt skomplikowany do tak trywialnego zadania. Bez obrazy, ale jest powód, dla którego masz 58 odpowiedzi i brak jest głosów.
Ateny Holloway,

Oczywiście źle zrozumiałeś, co tworzyłem. Licznik ma zwiększyć wartość opublikowaną w menu rozwijanym, a ja miałem kilka z tym samym identyfikatorem, tylko z innym „_ ##” na końcu, więc .length () byłby niedokładny. To jest powód „id * =” w selektorze.
vapcguy

Co do moich innych odpowiedzi, generalnie opowiadam się za prostszymi metodami, gdy tylko jest to możliwe, a jeśli ludzie nie byliby tak ezoteryczni w kodowaniu i pisali rzeczy, które byłyby bardziej uproszczone, moje odpowiedzi prawdopodobnie miałyby więcej głosów. Ale ludzie chcą sprawić, by wyglądali elegancko i dlatego nie wybiorą czegoś tak prostego. Nie robi mi to krzywdy, że chcę po prostu branży. Nie lubię też rozwiązywać problemów ani wykorzystywać kodu innych osób, który jest śmiesznie bardziej złożony, niż musi być.
vapcguy

Mógłbym też mieć więcej zaufania do $ (this) .length () w tej pętli, jeśli ktoś mógłby wyjaśnić, dlaczego wysyłanie „$ (this)” zamiast obiektu do myAppender nie działało.
vapcguy

0

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 ....


-1

spróbuj tej funkcji:

function addtoselect(param,value){
    $('#mySelectBox').append('&lt;option value='+value+'&gt;'+param+'&lt;/option&gt;');
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.