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 einen Ansatz, der die Microsoft Templating-Ansatz die derzeit zur Aufnahme in den jQuery-Kern vorgeschlagen wird. Es gibt mehr Leistung bei der Verwendung der Templating so für das einfachste Szenario kann es nicht die beste Option sein. Weitere Details finden Sie in Scott Gu's Beitrag, der die Funktionen umreißt.

Binden Sie zunächst die Templating-Js-Datei ein, die Sie unter github .

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

Als nächstes richten Sie eine Vorlage ein

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

Rufen Sie dann mit Ihren Daten die Methode .render() auf

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

Ich habe gebloggt diesen Ansatz näher zu erläutern.

Answer 2

Ich habe etwas Ähnliches gemacht, Laden eines Dropdown-Elements über Ajax . Die obige Antwort ist auch akzeptabel, aber es ist immer gut, so wenig DOM-Änderungen wie möglich vorzunehmen, um die Leistung zu verbessern.

Anstatt also jedes Element innerhalb einer Schleife hinzuzufügen, ist es besser, die Elemente innerhalb einer Schleife zu sammeln und sie nach Abschluss der Schleife anzuhängen.

$(data).each(function(){
    ... Collect items
})

Anhängen,

$('#select_id').append(items); 

oder noch besser

$('#select_id').html(items);

Answer 3

Die meisten der anderen Antworten verwenden die each Funktion zur Iteration über die selectValues . Dies erfordert, dass append für jedes Element aufgerufen wird und ein Reflow ausgelöst wird, wenn jedes Element einzeln hinzugefügt wird.

Die Aktualisierung dieser Antwort auf eine idiomatischere funktionale Methode (unter Verwendung von modernem JS) kann so gestaltet werden, dass der Aufruf append nur einmal, mit einem Array von option Elemente erstellt mit Karte und ein Option Element-Konstruktor.

Die Verwendung eines Option DOM-Element sollte den Aufwand für Funktionsaufrufe verringern, da die option Element muss nach der Erstellung nicht aktualisiert werden und die Parsing-Logik von jQuery muss nicht ausgeführt werden.

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

Dies kann weiter vereinfacht werden, wenn Sie eine Factory-Utility-Funktion erstellen, die ein Optionsobjekt neu erstellt:

const newoption = (...args) => new Option(...args)

Diese kann dann direkt an map :

$('mySelect').append($.map(selectValues, newoption))

Vorherige Formulierung

Denn append auch die Übergabe von Werten als variable Anzahl von Argumenten erlaubt, können wir die Liste der option Elemente Karte und fügen Sie sie als Argumente in einem einzigen Aufruf hinzu, indem Sie apply .

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

So sieht es in späteren Versionen von jQuery aus, append akzeptiert ebenfalls ein Array-Argument und kann etwas vereinfacht werden:

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

Answer 4

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

Es funktioniert gut mit jQuery 1.4.1.

Für vollständige Artikel für die Verwendung von dynamischen Listen mit ASP.NET MVC & jQuery besuchen:

Dynamische Auswahllisten mit MVC und jQuery

Answer 5

Der einfache Weg ist:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");