Hinzufügen von Optionen zu einem <select> mit jQuery?

Question

Wie fügt man am einfachsten eine option zu einem Dropdown mit jQuery?

Wird das funktionieren?

$("#mySelect").append('<option value=1>My option</option>');

Answer 1

$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

Wenn Sie Daten von einem Objekt erhalten, dann leiten Sie dieses Objekt einfach an die Funktion weiter...

$(function (product) {
     var option = $("<option></option>");
     option.text(product.Name);
     option.val(product.Id);
     $("#Select1").append(option);
});

Name und Id sind Namen von Objekteigenschaften... also können Sie sie nennen, wie immer Sie wollen... Und natürlich, wenn Sie Array haben... wollen Sie benutzerdefinierte Funktion mit for-Schleife zu bauen... und dann rufen Sie einfach diese Funktion im Dokument bereit... Prost

Answer 2

Basierend auf Dule's Antwort zum Anhängen einer Sammlung von Elementen, eine Einzeiler for...in wird ebenfalls Wunder wirken:

let cities = {'ny':'New York','ld':'London','db':'Dubai','pk':'Beijing','tk':'Tokyo','nd':'New Delhi'};

for(let c in cities){$('#selectCity').append($('<option>',{value: c,text: cities[c]}))}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<select  id="selectCity"></select>

Den Optionen werden sowohl Objektwerte als auch Indizes zugewiesen. Diese Lösung funktioniert auch in der alten jQuery (v1.4) !

Answer 3

Wenn jemand hierher kommt und nach einer Möglichkeit sucht, Optionen mit Dateneigenschaften hinzuzufügen

Verwendung von attr

var option = $('<option>', { value: 'the_value', text: 'some text' }).attr('family', model.family);

Verwendung von Daten - Version hinzugefügt 1.2.3

var option = $('<option>', { value: 'the_value', text: 'some text' }).data('misc', 'misc-value);

Answer 4

Wenn Sie optgroup innerhalb Wählen Sie erhalten Sie einen Fehler im DOM.

Ich denke, das ist der beste Weg:

$("#select option:last").after($('<option value="1">my option</option>'));

Answer 5

$('#select_id').append($('<option>',{ value: v, text: t }));