Was ist der beste Weg, um mit JQuery Optionen als JS-Objekt auszuwählen?

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 nicht sicher, ob die letzte Zeile in $ ('# mySelect') .html (output.join ('')) konvertiert werden kann, da ich keine jQuery-Interna kenne html () - Methode)

Dies ist etwas schneller und sauberer.

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

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

DOM Elements Creator Plugin verwenden (mein Favorit):

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

Verwenden des Konstruktors Option (nicht sicher, ob der Browser unterstützt wird):

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

Verwendung von document.createElement (Vermeidung zusätzlicher Arbeit beim Analysieren von HTML mit $("<option></option>")):

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

Das sieht schöner 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 der schnellste (getestete!) Weg, bei dem Sie Array- und keine String-Verkettung verwenden und nur einen Append-Aufruf verwenden.

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

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

Alle 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 browserübergreifend.

@joshperry

Es scheint, dass plain .append auch wie erwartet funktioniert,

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

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

 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

Ich habe ein paar Tests gemacht und dies funktioniert, glaube ich, am schnellsten. : P

Seien Sie vorgewarnt ... Ich verwende jQuery Mobile 1.0b2 mit PhoneGap 1.0.0 auf einem Android 2.2-Telefon (Cyanogen 7.0.1) (T-Mobile G2) und konnte die .append () -Methode nicht zum Laufen bringen. Ich musste .html () wie folgt verwenden:

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

Es gibt einen Ansatz unter Verwendung des Microsoft Templating-Ansatzes , der derzeit zur Aufnahme in jQuery Core vorgeschlagen wird. Die Verwendung des Templats bietet mehr Leistung. Für das einfachste Szenario ist dies möglicherweise nicht die beste Option. Weitere Einzelheiten finden Sie in Scott Gus Beitrag, in dem die Funktionen beschrieben werden.

Fügen Sie zunächst die Vorlage-js-Datei ein, die unter github verfügbar ist.

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

Richten Sie als Nächstes eine Vorlage ein

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

Dann rufen Sie mit Ihren Daten die .render () -Methode 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 genauer.

Ich habe so etwas gemacht, ein Dropdown-Element über Ajax laden . Die obige Antwort ist auch akzeptabel, aber es ist immer gut, so wenig DOM-Modifikationen wie möglich für eine bessere Leistung zu haben.

Anstatt jedes Element innerhalb einer Schleife hinzuzufügen, ist es besser, Elemente innerhalb einer Schleife zu sammeln und anzufügen, sobald sie abgeschlossen ist.

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

Füge es hinzu,

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

oder noch besser 

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

Ein Kompromiss zwischen den ersten beiden Antworten in einem "Einzeiler":

$.fn.append.apply($('mySelect'),
    $.map(selectValues, function(val, idx) {
        return $("<option/>")
            .val(val.key)
            .text(val.value);
    })
);

Baut ein Array von Option-Elementen mit map auf und hängt sie alle gleichzeitig an Select an, indem Sie mit apply jede Option als separates Argument für die Funktion append senden.

Der einfache Weg ist:

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

Anstatt den gleichen Code überall zu wiederholen, würde ich vorschlagen, dass es wünschenswerter ist, eine eigene jQuery-Funktion wie die folgende zu schreiben:

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

Um eine Option hinzuzufügen, führen Sie einfach folgende Schritte aus:

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

1. $.each ist langsamer als eine for-Schleife
2. Jedes Mal ist eine DOM-Auswahl nicht die bewährte Methode in Schleife $("#mySelect").append();.

Die beste Lösung ist also die folgende

Wenn JSON-Daten resp ist

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

benutze es als

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

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.

Einen vollständigen Artikel zur Verwendung dynamischer Listen mit ASP.NET MVC und jQuery finden Sie unter: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-und-jQuery.aspx

Sie können Ihr json-Array einfach mit dem folgenden Code durchlaufen

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

Obwohl die vorherigen Antworten alle gültige Antworten sind, kann es ratsam sein, alle diese zuerst an documentFragmnet anzuhängen und dann das Dokumentfragment als Element nach ...

John Resigs Gedanken zur Sache ...

Etwas im Sinne 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);

Es gibt ein Sortierproblem bei dieser Lösung in Chrome (jQuery 1.7.1) (Chrome sortiert Objekteigenschaften nach Name/Nummer?) Um die Reihenfolge beizubehalten (Ja, es ist Objektmissbrauch), habe ich Folgendes geändert:

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

zu diesem

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

und dann sieht $ .each so aus:

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

Noch eine andere Möglichkeit:

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

if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

Dadurch wird das DOM nur einmal bearbeitet, nachdem eine riesige Zeichenfolge erstellt wurde.

Das JSON-Format:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

Und der jQuery-Code zum Auffüllen der Werte für das Dropdown-Menü "Erfolg bei Ajax"

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.Push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.Push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

Das ist, was ich mit zweidimensionalen Arrays gemacht habe: Die erste Spalte ist Artikel i, addiere zu innerHTML des <option>. Die zweite Spalte ist record_id i, addiere zur value des <option>:

1. PHP

   $items = $dal->get_new_items(); // Gets data from the database
   $items_arr = array();
   $i = 0;
   foreach ($items as $item)
   {
       $first_name = $item->first_name;
       $last_name = $item->last_name;
       $date = $item->date;
       $show = $first_name . " " . $last_name . ", " . $date;
       $request_id = $request->request_id;
       $items_arr[0][$i] = $show;
       $items_arr[1][$i] = $request_id;
       $i++;
   }
   
   echo json_encode($items_arr);
   

2. JavaScript/Ajax

           function ddl_items() {
               if (window.XMLHttpRequest) {
                   // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                   xmlhttp=new XMLHttpRequest();
               }
               else{
                   // Code for Internet Explorer 6 and Internet Explorer 5
                   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
               }
   
               xmlhttp.onreadystatechange=function() {
               if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                   var arr = JSON.parse(xmlhttp.responseText);
                   var lstbx = document.getElementById('my_listbox');
   
                   for (var i=0; i<arr.length; i++) {
                       var option = new Option(arr[0][i], arr[1][i]);
                       lstbx.options.add(option);
                   }
               }
           };
   
           xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
           xmlhttp.send();
       }
   }
   

Ein jQuery-Plugin kann hier gefunden werden: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ .

Mit der $ .map () - Funktion können Sie dies auf eine elegantere Weise tun:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

Ich habe festgestellt, dass dies einfach ist und gut funktioniert. 

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

Setzen Sie Ihre HTML-Auswahl-ID in die folgende Zeile. Hier wird mySelect als ID des select-Elements verwendet. 

   var options = $("#mySelect");

holen Sie sich dann das Objekt, das in diesem Szenario die selectValues ​​ist, und setzt es für jede Schleife auf die Jquery. Der Wert und der Text der Objekte wird entsprechend verwendet und wie folgt in die Auswahlmöglichkeiten eingefügt. 

$.each(selectValues, function(val, text) {
            options.append(
             $('<option></option>').val(val).html(text)
          );
      });

Dadurch wird Text als Optionsliste angezeigt, wenn die Dropdown-Liste ausgewählt ist. Sobald ein Text ausgewählt ist, wird der Wert des ausgewählten Textes verwendet. 

Z.B.

"1": "Test 1", "2": "Test 2",

Dropdown-Liste,

anzeigename: Test 1 -> Wert ist 1 Anzeigename: Test 2 -> Wert ist 2

Ich entschied mich dafür, etwas zu läuten.

1. Umgang mit zuvor ausgewählter Option; Einige Browser gehen beim Anhängen durcheinander
2. NUR einmal DOM mit dem Append drücken
3. Behandeln Sie die Eigenschaft multiple, während Sie weitere Optionen hinzufügen
4. Zeigen Sie, wie Sie ein Objekt verwenden
5. Zeigen Sie, wie Sie mithilfe eines Arrays von Objekten eine Zuordnung vornehmen

// 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>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

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

Da die Variable append von JQuery ein Array als Argument verwenden kann, ist es erstaunlich, dass niemand vorgeschlagen hat, dies als Einzeiler mit map zu verwenden.

$('#the_select').append(['a','b','c'].map(x => $('<option>').text(x)));

oder reduce

['a','b','c'].reduce((s,x) => s.append($('<option>').text(x)), $('#the_select'));

Ich kombiniere die zwei besten Antworten zu einer großartigen 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(''));

Um die verbesserte Leistung zu erzielen, ist es besser, die Optionsliste separat zu erstellen und an die Auswahl-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/