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

Es gibt ein Sortierproblem mit dieser Lösung in Chrome (jQuery 1.7.1) (Chrome sortiert Objekteigenschaften nach Name/Nummer?) Also, um die Reihenfolge zu halten (ja, es ist Objekt missbrauchen), änderte ich dies:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

hierzu

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

und dann sehen die $.each so aus:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
});

Answer 2

Anstatt denselben Code überall zu wiederholen, würde ich vorschlagen, dass es wünschenswerter ist, eine eigene jQuery-Funktion wie diese zu schreiben:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

Um dann eine Option hinzuzufügen, gehen Sie wie folgt vor:

$('select').addOption('0', 'None');

Answer 3

Sie können Ihr json-Array einfach mit folgendem Code iterieren

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");

Answer 4

1. $.each ist langsamer als ein for Schleife
2. Eine DOM-Auswahl ist nicht in jedem Fall die beste Praxis in einer Schleife $("#mySelect").append();

Die beste Lösung ist also die folgende

Wenn JSON-Daten resp es

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

verwenden Sie es als

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

Answer 5

Obwohl die vorherigen Antworten alle gültig sind - es könnte ratsam sein, alle diese zu einem documentFragmnet zuerst anhängen, dann dieses Dokumentfragment als ein Element nach...

Siehe Die Gedanken von John Resig zu diesem Thema ...

Etwas in der Art von:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);