Was ist der beste Weg, um Optionen zu einer Auswahl aus einem JavaScript-Objekt mit jQuery hinzufügen?

Question

Was ist die beste Methode zum Hinzufügen von Optionen zu einer <select> aus einem JavaScript-Objekt mit jQuery?

Ich bin auf der Suche nach etwas, für das ich kein Plugin benötige, aber ich würde mich auch für die Plugins interessieren, die es bereits gibt.

Das habe ich getan:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

Eine saubere/einfache Lösung:

Dies ist eine bereinigte und vereinfachte Version von matdumsa's :

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

Änderungen von matdumsa's: (1) das close-Tag für die Option innerhalb von append() entfernt und (2) die Eigenschaften/Attribute in eine Map als zweiten Parameter von append() verschoben.

Answer 1

Ich kombiniere die beiden besten Antworten zu einer großen Antwort.

var outputConcatenation = [];

$.each(selectValues, function(i, item) {   
     outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});

$("#myselect").html(outputConcatenation.join(''));

Answer 2

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key, text: value
    }));
});

Answer 3

Um die Leistung zu verbessern, ist es besser, die Optionsliste separat zu erstellen und an die Select-ID anzuhängen.

var options = [];
$.each(selectValues, function(key, value) {
    options.push ($('<option>', { value : key })
          .text(value));
});
 $('#mySelect').append(options);

http://learn.jquery.com/performance/append-outside-loop/

Answer 4

Reines JS

In reinem JS ist das Hinzufügen der nächsten Option zur Auswahl einfacher und direkter

mySelect.innerHTML+= `<option value="${key}">${value}</option>`;

let selectValues = { "1": "test 1", "2": "test 2" };

for(let key in selectValues) { 
  mySelect.innerHTML+= `<option value="${key}">${selectValues[key]}</option>`;
}

<select id="mySelect">
  <option value="0" selected="selected">test 0</option>
</select>

Answer 5

Ich habe beschlossen, mich ein wenig einzubringen.

1. Umgang mit der zuvor ausgewählten Option; einige Browser stören beim Anhängen
2. DOM NUR einmal mit der Append-Funktion treffen
3. Umgang mit multiple Eigenschaft und fügen weitere Optionen hinzu
4. Zeigen, wie man ein Objekt verwendet

5. Zeigen, wie man mit einem Array von Objekten abbildet

   // objects as value/desc let selectValues = { "1": "test 1", "2": "test 2", "3": "test 3", "4": "test Four" }; //use div here as using "select" mucks up the original selected value in "mySelect" let opts = $("<div />"); let opt = {}; $.each(selectValues, function(value, desc) { opts.append($('<option />').prop("value", value).text(desc)); }); opts.find("option").appendTo('#mySelect');

   // array of objects called "options" in an object let selectValuesNew = { options: [{ value: "1", description: "2test 1" }, { value: "2", description: "2test 2", selected: true }, { value: "3", description: "2test 3" }, { value: "4", description: "2test Four" } ] };

   //use div here as using "select" mucks up the original selected value let opts2 = $("<div />"); let opt2 = {}; //only append after adding all options $.map(selectValuesNew.options, function(val, index) { opts2.append($('<option />') .prop("value", val.value) .prop("selected", val.selected) .text(val.description)); }); opts2.find("option").appendTo('#mySelectNew');

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="mySelect"> <option value="" selected="selected">empty</option> </select>

   <select id="mySelectNew" multiple="multiple"> <option value="" selected="selected">2empty</option> </select>