web-dev-qa-db-ger.com

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

Wie die Frage sagt, füge ich einer DropDownList mit jQuery eine neue Option hinzu?

Vielen Dank

290
flesh

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 mehrmals unnötig zu ändern. Für nur eine Handvoll Optionen würde ich jedoch sagen, dass es sich nicht lohnt.

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

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

Was wir tun können, ist, ein neues Auswahlelement zu erstellen und dann alle Optionen anzufügen. Wenn die Schleife beendet ist, hängen Sie sie an das aktuelle 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!

451
nickf

Ohne Plug-Ins kann dies einfacher sein, wenn nicht so viel jQuery verwendet wird, sondern etwas mehr Oldschool:

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 oder nicht 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) );
161
Phrogz

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

Möglicherweise möchten Sie zuerst Ihr DropDown 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));    
11
Har

Element anfangs zur Liste hinzufügen

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

Am Ende Element zur Liste hinzufügen

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

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

7
Zakaria

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

Verwenden Sie auch .prepend (), um die Option am Anfang der Optionsliste einzufügen. http://api.jquery.com/prepend/

3
Johan

U kann direkt verwenden

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

-> Hier können Sie eine direkte Zeichenfolge verwenden

3
Jay

mit JQuery können Sie verwenden

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

dabei ist "myid" das id der Dropdown-Liste und newvalue der Text, den Sie einfügen möchten.

0
chopss

Ich musste Dropdowns so viele Optionen hinzufügen, wie es Dropdowns auf meiner Seite gab. 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 werden Dropdowns mit Werten wie 1 bis n dynamisch eingerichtet und automatisch der Wert für die Reihenfolge ausgewählt, in der sich das Dropdown befand (d. H. Das zweite Dropdown hat "2" in der Box usw.).

Es war lächerlich, dass ich this oder this.Object Oder $.obj Oder ähnliches in meiner 2. .each() nicht verwenden konnte, obwohl --- ich tatsächlich hatte um die spezifische ID dieses Objekts zu ermitteln und das gesamte Objekt zu erfassen und an meine Funktion zu übergeben, bevor es angehängt wird. Zum Glück wurde die ID meines Dropdowns durch ein "_" getrennt und ich konnte sie abrufen. Ich habe nicht das Gefühl, ich hätte es tun sollen, aber es gab mir andernfalls immer wieder jQuery-Ausnahmen. Etwas anderes, das mit dem zu kämpfen hat, was ich war, könnte es genießen, es zu wissen.

0
vapcguy