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

Das Gleiche wie bei anderen Antworten, in einer jQuery-Art:

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

Answer 2

var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

Auf diese Weise berühren Sie das DOM" nur einmal.

Ich bin mir nicht sicher, ob die letzte Zeile in $('#mySelect').html(output.join('')) umgewandelt werden kann, da ich die Interna von jQuery nicht kenne (vielleicht wird in der html()-Methode ein Parsing durchgeführt)

Answer 3

Dies ist etwas schneller und sauberer.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

Answer 4

jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

Vanille-JavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

Answer 5

Wenn Sie keine alten IE-Versionen unterstützen müssen, können Sie die Option Konstrukteur ist eindeutig der richtige Weg, eine lesbare und effiziente Lösung :

$(new Option('myText', 'val')).appendTo('#mySelect');

Es ist in seiner Funktionalität gleichwertig, aber sauberer als diese:

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');