Wie füge ich einer DropDownList mit jQuery Optionen hinzu?

291

Wie füge ich einer DropDownList mit jQuery eine neue Option hinzu?

Vielen Dank

Fleisch
quelle
Nur neugierig, warum diese Frage abgelehnt wurde? Wahrscheinlich, weil es kein Code-Snippet zeigt :)
Shasi Kanth

Antworten:

451

Ohne zusätzliche Plugins zu verwenden,

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

Wenn Sie viele Optionen hatten oder dieser Code sehr häufig ausgeführt werden musste, sollten Sie ein DocumentFragment verwenden, anstatt das DOM unnötig oft zu ändern. Für nur eine Handvoll Optionen würde ich sagen, dass es sich jedoch nicht lohnt.

------------------------------- Hinzugefügt ------------------ --------------

DocumentFragmentist eine gute Option zur Geschwindigkeitsverbesserung, aber wir können kein Optionselement mit erstellen, document.createElement('option')da IE6 und IE7 dies nicht unterstützen.

Wir können ein neues Auswahlelement erstellen und dann alle Optionen anhängen. Wenn die Schleife beendet ist, hängen Sie sie an das eigentliche DOM-Objekt an.

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

Auf diese Weise ändern wir DOM nur einmal!

nickf
quelle
8
Die Methodenparameter sind etwas irreführend, die Funktion (Wert, Text) sollte beispielsweise Funktion (Index, Option) sein. Funktioniert sonst gut.
mbillard
14
@ Crossbrowser: Ich bin anderer Meinung - valund textbeschreibe tatsächlich die Variablen und ihre Verwendung.
Nickf
1
Nur für dieses Beispiel sind diese Variablen jedoch als Allzweckmethode irreführend (es gab mir keine Ahnung, wie diese Methode verwendet werden soll). Ich gebe jedoch an, dass es bei der Antwort nicht um die Verwendung der $ .each-Methode ging.
mbillard
1
Ich habe vorher verwendet mySelect.append(new Option(text, val));, was in IE8 nicht funktioniert hat. Ich musste zu @ nickf's wechselnmySelect.append($('<option></option>').val(val).html(text));
Matthew Clark
5
@ Briansol:.attr('selected', true|false)
Nickf
167

Ohne Plug-Ins kann dies einfacher sein, ohne so viel jQuery zu verwenden, statt etwas älter zu werden:

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

Wenn Sie angeben möchten, ob die Option a) der standardmäßig ausgewählte Wert ist und b) jetzt ausgewählt werden soll, können Sie zwei weitere Parameter übergeben:

    var defaultSelected = false;
    var nowSelected     = true;
    $('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );
Phrogz
quelle
1
Wie legen Sie die Eigenschaften wie die Auswahl eines Standardwerts fest?
Krishnan
20
Ich mag dieses besser als die "<option></option>"Methode; das scheint dreckig.
Josh M.
1
funktioniert nicht in ie8 .. habe es einfach ausprobiert und auch einen weiteren Kommentar dazu unten gesehen.
Briansol
13

Mit dem Plugin: jQuery Selection Box . Du kannst das:

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

Möglicherweise möchten Sie Ihr DropDown zuerst löschen $ ('# DropDownQuality'). Empty ();

Ich ließ meinen Controller in MVC eine Auswahlliste mit nur einem Element zurückgeben.

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

Fügen Sie am Anfang ein Element zur Liste hinzu

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

Fügen Sie am Ende ein Element zur Liste hinzu

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

Allgemeine Dropdown-Operation (Abrufen, Festlegen, Hinzufügen, Entfernen) mit jQuery

Zakaria
quelle
1
Wenn Sie in Ihren Optionsparametern doppelte Anführungszeichen verwenden, wird die Funktion geschlossen und das Skript unterbrochen. Ein Wechsel .prepend("...") / $("...")zu .prepend('...') / $('...')würde das Snippet reparieren.
Heraldmonkey
4

Bitte beachten Sie, dass die Lösung von @ Phrogz in IE 8 nicht funktioniert, während die von @ nickf in allen gängigen Browsern funktioniert. Ein anderer Ansatz ist:

$.each(myOptions, function(val, text) {
    $("#mySelect").append($("&lt;option/&gt;").attr("value", val).text(text));
});
Marschall
quelle
3

Sie können direkt verwenden

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

-> Hier kannst du einen direkten String verwenden

Jay
quelle
3

Verwenden Sie außerdem .prepend (), um die Option am Anfang der Optionsliste hinzuzufügen. http://api.jquery.com/prepend/

Johan
quelle
0

mit jquery können Sie verwenden

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

Dabei ist " myid " die ID der Dropdown-Liste und newvalue der Text, den Sie einfügen möchten.

hacken
quelle
0

Ich musste Dropdowns so viele Optionen hinzufügen, wie Dropdowns auf meiner Seite vorhanden waren. Also habe ich es so benutzt:

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

Dadurch wurden Dropdowns dynamisch mit Werten wie 1 bis n eingerichtet und automatisch der Wert für die Reihenfolge ausgewählt, in der sich das Dropdown befand (dh das zweite Dropdown-Menü wurde mit "2" in der Box usw. versehen).

Es war lächerlich , dass ich nicht nutzen konnte thisoder this.Objectoder $.objoder so etwas in meinem zweiten .each(), obwohl --- ich tatsächlich hatte , um die spezifische ID des Objekts zu erhalten und dann das ganze Objekt zu meiner Funktion greifen und übergeben , bevor sie anhängen würde. Glücklicherweise wurde die ID meines Dropdowns durch ein "_" getrennt und ich konnte sie abrufen. Ich habe nicht das Gefühl, dass ich es hätte tun müssen, aber es gab mir immer wieder jQuery-Ausnahmen. Etwas, das andere mit dem zu kämpfen hatten, was ich war, könnte es genießen, es zu wissen.

vapcguy
quelle
Warum erhöhen Sie den Zähler in jedem? Bist du neu bei jquery? var counter = $ ('[id * = "ddlPosition _"]'). Die Länge ist weniger ausführlich und effizienter. Ich denke, Sie brauchen etwas mehr Erfahrung, bevor Sie Ihren Code veröffentlichen. Dies ist kein Produktionsqualitätscode, da er schlecht geschrieben und für eine so triviale Aufgabe zu komplex ist. Nichts für ungut, aber es gibt einen Grund, warum Sie 58 Antworten und keine Stimmen haben.
Athen Holloway
Sie haben offensichtlich falsch verstanden, was ich geschaffen habe. Der Zähler dient dazu, den in der Dropdown-Liste angegebenen Wert zu erhöhen, und ich hatte mehrere mit derselben ID, nur mit einem anderen "_ ##" am Ende, sodass .length () ungenau gewesen wäre. Das ist der Grund für das "id * =" im Selektor.
Vapcguy
Was meine anderen Antworten betrifft, plädiere ich im Allgemeinen auch für einfachere Methoden, wann immer dies möglich ist, und wenn die Leute mit ihrer Codierung nicht so esoterisch wären und Dinge schreiben würden, die einfacher sind, hätten meine Antworten wahrscheinlich mehr Stimmen. Aber die Leute wollen sich schlau machen und deshalb nicht so einfach auswählen. Das macht mich nicht falsch, wenn ich einfach nur die Branche haben will. Ich mag es nicht, Fehler zu beheben oder auf den Code anderer Leute aufzubauen, der lächerlich komplexer ist, als er sein muss.
Vapcguy
Ich könnte auch mehr Vertrauen in $ (this) .length () in dieser Schleife haben, wenn jemand erklären könnte, warum das Senden von "$ (this)" anstelle des Objekts an myAppender nicht funktioniert hat.
Vapcguy
0

Nehmen wir an, Ihre Antwort lautet "successData". Diese enthält eine Liste, die Sie als Optionen in einem Dropdown-Menü hinzufügen müssen.

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

Das würde für dich funktionieren ....

Dulith De Costa
quelle
-1

Versuchen Sie diese Funktion:

function addtoselect(param,value){
    $('#mySelectBox').append('&lt;option value='+value+'&gt;'+param+'&lt;/option&gt;');
}
Sebastian Mach
quelle