Quelle est la meilleure façon d'ajouter des options à une sélection d'objet JavaScript avec jQuery ?

Question

Quelle est la meilleure méthode pour ajouter des options à un fichier <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 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 et simple :

Il s'agit d'une version nettoyée et simplifiée version de matdumsa :

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

Modifications par rapport à celles de matdumsa : (1) suppression de la balise close pour l'option dans append() et (2) déplacement des propriétés/attributs dans une map en tant que second paramètre de append().

Answer 1

La même chose que les autres réponses, à la manière de jQuery :

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

Answer 2

var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

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

Je ne suis pas sûr que la dernière ligne puisse être convertie en $('#mySelect').html(output.join('')) car je ne connais pas les mécanismes internes de jQuery (peut-être que la méthode html() effectue une analyse syntaxique).

Answer 3

Cette méthode est légèrement plus rapide et plus propre.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

Answer 4

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

Answer 5

Si vous n'avez pas à prendre en charge d'anciennes versions d'IE, l'utilisation de l'option Option Constructeur est clairement la voie à suivre, une solution lisible et efficace :

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

Il est équivalent en fonctionnalité à, mais plus propre que :

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');