web-dev-qa-db-fra.com

JavaScript: ajouter un attribut supplémentaire après la nouvelle option ()

J'ai un morceau de code qui ajoute dynamiquement des options à un champ de sélection en fonction d'autres critères. Cela ressemble un peu à ceci:

if (chosen == "a_value") {
  selbox.options[selbox.options.length] = new Option('text_1','value_1');
  selbox.options[selbox.options.length] = new Option('text_2','value_2');
  selbox.options[selbox.options.length] = new Option('text_3','value_3');
}

Ce dont j'ai besoin, c'est d'ajouter un attribut supplémentaire à cette nouvelle option qui contient une valeur spécifique. Dans ce cas, l'attribut sera appelé "remise" et la valeur sera un entier. Plus tard, je vais lire les valeurs d'attribut et les traiter en fonction de la valeur du champ Option.

Une option ressemblera donc à ceci, une fois le script prêt;

<option value="value_1" discount="integer">text_1</option>

Logique?

Maintenant, comment puis-je faire cela sans utiliser de frameworks JS. C'est juste cette petite partie de code dont j'ai besoin, donc un cadre serait exagéré pour ce projet.

À votre santé! :-)

javascriptattributesoption
19
Léon

vous pouvez faire quelque chose comme


var o1 = new Option("key","value");
selbox.options[selbox.options.length] = o1;
o1.setAttribute("key","value");
41
sushil bharwani

Je sais que c'est vieux mais je suis tombé sur cette question quand j'ai oublié que c'était add et non Push aujourd'hui.

La bonne façon est d'utiliser select.options.add .

 var opt = document.createElement('option');
 opt.value = 'hello';
 opt.text = 'world';
 opt.setAttribute('data-discount', 'integer');
 selbox.options.add(opt);
4
Cory Mawhorter

Vous pouvez combiner cela en une seule ligne de code:

(selbox.options[selbox.options.length] = new Option("key","value")).setAttribute("key","value");

Notez que cela ne fonctionnera que si vous n'avez qu'un seul attribut à ajouter, sinon vous aurez besoin d'une variable temporaire.

2
Niet the Dark Absol