it-swarm.com.de

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

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

Ich bin auf der Suche nach etwas, für das ich kein Plugin brauche, aber ich wäre auch an den Plugins interessiert, die es gibt.

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 eine bereinigte und vereinfachte Version von matdumsas :

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

Änderungen von matdumsa: (1) hat das close-Tag für die Option in append () entfernt und (2) die Eigenschaften/Attribute als zweiten Parameter von append () in eine Map verschoben.

1276
Darryl Hein

Wie bei anderen Antworten auf jQuery-Art und Weise:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});
1292
matdumsa
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)

248
gpilotino

Dies ist etwas schneller und sauberer.

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

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));
}
86
Carl Hörberg

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"));
33
Nickolay

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(''));
28
m1sfit

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.

19
Animism

@joshperry

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

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

    return $("<option>").val(k).text(v);
  })
);
19
Сухой27
 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

15
Thorpe Obazee

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);
15
Jack Holt

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.

12
Nick Josevski

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);
9
Komang

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.

7
joshperry

Der einfache Weg ist:

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

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');
7
Matt
  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);
6
Salim
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

6
H Sampat

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

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

5
kashif

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);
5
Stuart.Sklinar

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

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.

5
Christian Roman

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
}
3
M.J

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();
        }
    }
    
3
Salty
3
lkahtz

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(''));
2
Dr Fred

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

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

1
Dulith De Costa

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>

1
<!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>
1
Satyendra Yadav
$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key, text: value
    }));
});
0
Lokesh thakur

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'));
0
SU3

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(''));
0

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/

0
shohan