1362 votes

Quelle est la meilleure façon d’ajouter des options à une sélection d’une matrice avec jQuery ?

Quelle est la meilleure méthode pour ajouter des options à une sélection à partir d'un objet JSON à l'aide de jQuery?

Je suis à la recherche de quelque chose que je n'ai pas besoin d'un plugin pour le faire, mais il serait également intéressé par les plugins qui sont là-bas.

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

Un nettoyage/solution simple:

C'est un nettoyés et simplifiée de la version de matdumsa de:

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

Les changements de matdumsa: (1) suppression de la balise de fermeture de l'option à l'intérieur append() et (2) déplacé à l'propriétés/attributs dans une carte en tant que second paramètre de la fonction append().

1368voto

matdumsa Points 6779
<p>Même que les autres réponses, à la mode de jQuery :<pre><code></code></pre></p>

266voto

gpilotino Points 5644
<pre><code></code><p><p><strike> Je ne sais pas si la dernière ligne peut être convertie en $('#mySelect').html(output.join('')) parce que je ne sais pas jquery internals (peut-être pour cela, certains l’analyse dans la méthode html()) </strike></p></pre>

200voto

rocktheroad Points 1203
<p>Il s’agit d’un peu plus rapide et plus propre.<pre><code></code></pre></p>

95voto

Carl Hörberg Points 2786
<p>jQuery<pre><code></code></pre><p>javascript pur</p><pre><code></code></pre></p>

37voto

Nickolay Points 14384
<p>En utilisant le <a href="http://plugins.jquery.com/project/DOMEC">plugin créateur d’éléments DOM</a> (mon préféré) :<pre><code></code></pre><p>À l’aide de la <code></code> constructeur (pas sûr de l’appui de navigateur) :</p><pre><code></code></pre><p>À l’aide de <code></code> (éviter le surcroît de travail l’analyse HTML avec <code></code> ) :</p><pre><code></code></pre></p>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X