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

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

Vielen Dank

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!

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

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

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

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

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

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

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

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.

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.

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

Versuchen Sie diese Funktion:

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