Question Quel est le meilleur moyen d'ajouter des options à un select à partir d'un objet JS avec jQuery?


Quelle est la meilleure méthode pour ajouter des options à un <select> à partir d'un objet JavaScript utilisant jQuery?

Je cherche quelque chose que je n'ai pas besoin d'un plugin à faire, mais je serais aussi intéressé par les plugins qui existent.

C'est ce que j'ai fait:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

Une solution propre / simple:

Ceci est un nettoyé et simplifié version de matdumsa:

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

Changements de matdumsa: (1) enlevé la balise de fermeture de l'option dans append () et (2) déplacé les propriétés / attributs dans une carte en tant que second paramètre de append ().


1204
2017-10-04 20:58


origine


Réponses:


Identique aux autres réponses, de manière jQuery:

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

De cette façon, vous "touchez le DOM" une seule fois.

Je ne suis pas sûr si la dernière ligne peut être convertie en $ ('# mySelect'). Html (output.join ('')) parce que je ne connais pas les internes de jQuery (peut-être fait-il un peu d'analyse dans le html () méthode)


238
2017-11-05 19:42



C'est légèrement plus rapide et plus propre.

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

Vanilla 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



En utilisant Plugin DOM Elements Creator (mon préféré):

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

En utilisant le Option constructeur (pas sûr du support du navigateur):

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

En utilisant document.createElement (en évitant un travail supplémentaire en analysant HTML avec $("<option></option>")):

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

30
2017-10-05 15:49



Cela semble plus agréable, fournit une meilleure lisibilité, mais est plus lent que les autres méthodes.

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

Si vous voulez de la vitesse, la méthode la plus rapide (testée!) Est celle-ci, en utilisant array, pas de concaténation de chaîne, et en utilisant un seul appel append.

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



Toutes ces réponses semblent inutilement compliquées. Tout ce dont tu as besoin c'est:

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

C'est complètement compatible avec tous les navigateurs.


17
2017-10-11 17:20



@joshperry

Il semble que plaine .ajouter fonctionne aussi comme prévu,

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

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

15
2018-04-17 11:29



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

J'ai fait quelques tests et je crois que le travail est le plus rapide. : P


14
2017-11-09 06:29



Soyez averti ... J'utilise jQuery Mobile 1.0b2 avec PhoneGap 1.0.0 sur un téléphone Android 2.2 (Cyanogen 7.0.1) (T-Mobile G2) et je n'ai pas réussi à faire fonctionner la méthode .append (). J'ai dû utiliser .html () comme suit:

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

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

12
2017-09-16 13:22



Il y a une approche en utilisant le Approche de Microsoft Templating C'est actuellement sous la proposition d'inclusion dans le noyau de jQuery. Il y a plus de puissance dans l'utilisation du modèle, donc pour le scénario le plus simple, ce n'est peut-être pas la meilleure option. Pour plus de détails, voir le post de Scott Gu décrivant les fonctionnalités.

D'abord inclure le fichier js template, disponible à partir de github.

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

Ensuite, configurez un modèle

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

Ensuite, avec vos données, appelez la méthode .render ()

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

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

J'ai blogué cette approche plus en détail.


11
2017-07-08 05:00