Quelle est la meilleure méthode pour ajouter des options à un " select " à partir d'un objet JavaScript en utilisant jQuery ?
Je cherche quelque chose qui ne nécessite pas de plugin, mais je suis également intéressé par les plugins existants.
Voici 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:
Il s'agit d'une [version de matdumsa's][1] nettoyée et simplifiée :
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
});
Changements par rapport à matdumsa's : (1) suppression de la balise close pour l'option dans append() et (2) déplacement des propriétés/attributs dans une map comme second paramètre de append().
Comme les autres réponses, à la manière de jQuery :
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
Si vous ne devez pas prendre en charge les anciennes versions d'IE, l'utilisation du constructeur [Option
] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option) est clairement la meilleure solution, [une solution lisible et efficace] (https://stackoverflow.com/a/57634509/1026) :
$(new Option('myText', 'val')).appendTo('#mySelect');
Il est équivalent en fonctionnalité, mais plus propre que :
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
J'ai fait quelque chose comme ceci, [charger un élément de liste déroulante via Ajax][1]. La réponse ci-dessus est également acceptable, mais il est toujours bon de modifier le moins possible le DOM pour améliorer les performances.
Ainsi, plutôt que d'ajouter chaque élément dans une boucle, il est préférable de collecter les éléments dans une boucle et de les ajouter une fois qu'ils sont terminés.
$(data).each(function(){
... Collect items
})
Ajoutez-le,
$('#select_id').append(items);
ou mieux encore
$('#select_id').html(items);