Frage Was ist der beste Weg, um Optionen zu einer Auswahl von als JS-Objekt mit jQuery hinzuzufügen?


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

Ich suche nach etwas, für das ich kein Plugin benötige, aber ich würde mich auch für die Plugins interessieren, die da draußen sind.

Das habe ich gemacht:

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 aufgeräumt und vereinfacht Version von Matdumsa:

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

Änderungen von Matdumsa: (1) entfernt das Schließen-Tag für die Option innerhalb von append () und (2) verschoben die Eigenschaften / Attribute in eine Karte als der zweite Parameter von append ().


1204
2017-10-04 20:58


Ursprung


Antworten:


Genau wie andere Antworten in jQuery Mode:

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

1222
2017-10-04 21:12



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') konvertiert werden kann. Html (output.join ('')) weil ich jQuery-Internals nicht kenne (vielleicht tut es etwas im html () Methode)


238
2017-11-05 19:42



Das ist etwas schneller und sauberer.

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

181
2017-07-01 07:00



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));
}

77
2018-05-31 22:52



Verwenden DOM Elements Creator Plugin (mein Favorit):

$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');

Verwendung der Option Konstruktor (ich bin mir nicht sicher über die Browserunterstützung):

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

Verwenden document.createElement (Vermeiden Sie zusätzliche Arbeit mit HTML mit $("<option></option>")):

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));

30
2017-10-05 15:49



Das sieht besser aus, bietet Lesbarkeit, ist aber langsamer als andere Methoden.

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

Wenn Sie Geschwindigkeit wünschen, ist dies die schnellste (getestet!) Methode, die Array, keine String-Verkettung und nur einen Append-Aufruf verwendet.

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

25
2017-12-21 15:50



All diese Antworten erscheinen unnötig kompliziert. Alles was Sie brauchen ist:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

Das ist vollständig Cross-Browser-kompatibel.


17
2017-10-11 17:20



@ Joshperry

Es scheint so klar .append funktioniert auch wie erwartet,

$("mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

15
2018-04-17 11:29