fixation de change() même auditeurs pour sélectionner/déroulante dynamiquement

Je suis de créer 3 listes déroulantes/sélectionnez les cases à la volée et de les insérer dans le DOM à travers .innerHTML.

Je ne connais pas l'ID de la dropdowns jusqu'à ce que j'ai créé en javascript.
Pour savoir qui des listes déroulantes ont été créés, j'ai créer un tableau dans lequel je stocke l'ID de la dropdowns que j'ai créé.

for(var i=0; i<course.books.length; i++)
{
  output+="<label for='book_"+course.books[i].id+"'>"+ course.books[i].name +"</label>";
  output+="<select id='variant"+course.books[i].id+"' name='book_"+course.books[i].id+"'>";
  output+="<option value='-'>-- Select one --</option>";
  for(var j=0; j<course.books[i].options.length; j++)
  {
      output+="<option value='"+course.books[i].options[j].id+"'>"+course.books[i].options[j].name+"</option>";
  }
  output+="</select>";
}

Maintenant, j'ai un tableau avec 3 id du genre:

dropdown1
dropdown2
dropdown3

Ce que je veux accomplir avec javascript (sans utiliser jquery ou un autre framework) est de faire une boucle sur ces 3 listes déroulantes et joindre un changement écouteur d'événement pour eux.

Lorsqu'un utilisateur modifie la sélection dans l'un de ces déroulante, je veux appeler une fonction appelée "updatePrice" par exemple.

Je suis un peu coincé sur la dynamique de l'ajout des écouteurs d'événement ici, toute aide est grandement appréciée!

liste déroulante = sélectionner ? veuillez inclure le code que vous utilisez pour créer ces "listes déroulantes"
oui, déroulant = sélectionnez

InformationsquelleAutor Jorre | 2011-12-08

javascript-events

1

Maintenant que vous avez ajouté votre code son de droite vers l'avant et vous pouvez ignorer mon détaillé de réponse !!!
```
output+="<select id='variant"+course.books[i].id+"' name='book_"+course.books[i].id+"'>";
```
peut devenir :
```
output+="<select onchange="updatePrice(this)" id='variant"+course.books[i].id+"' name='book_"+course.books[i].id+"'>";
```
Ce qui fera appel à la updatePrice fonction, en passant la liste de sélection qui a changé

Cependant

OMI son beaucoup mieux (à partir d'un point de vue des performances pour un début) pour créer des éléments dans le DOM à l'aide de la DOM.
```
var newSelect = document.createElement("select");
newSelect.id = "selectlistid"; //add some attributes
newSelect.onchange = somethingChanged;  //call the somethingChanged function when a change is made

newSelect[newSelect.length] = new Option("One", "1", false, false); //add new option    
document.getElementById('myDiv').appendChild(newSelect); //myDiv is the container to hold the select list
```
Exemple ici -> http://jsfiddle.net/MStgq/2/
- merci, est-il exact que .ajouter(en option), null) n'est pas compatible avec IE? J'ai lu que le deuxième paramètre doit être omis de le faire fonctionner sous IE. Dans ce cas, c'est mon premier (plus) la solution est la meilleure et la plus conforme à la loi?
- Je préfère toujours utiliser la méthode DOM de créer des éléments .. c'est plus rapide lorsque vous faites beaucoup -> jsperf.com/dom-vs-innerhtml/10
- également changé add à appendChild
- et est-il de la croix-navigateur compatible?
- ajout d'un jsfiddle vers le bas à la démo elle - croix-navigateur ajout du support avec new Option appel de fonction ...
- Merci pour cela. Je suis allé de même avec la deuxième méthode et ré-écrit mon code. Merci beaucoup pour souligner qu'il y a une meilleure façon de créer des listes déroulantes...
InformationsquelleAutor ManseUK
1

Vous avez obtenu le tableau déjà? Ensuite, vous pouvez faire ceci:
```
function updatePrice()
{
     alert(this.id + " - " + this.selectedIndex);   
}

var list = ["dropdown1", "dropdown2"];
for(var i=0;i<list.length;i++)
{
    document.getElementById(list[i]).onchange = updatePrice;
}
```
Violon: http://jsfiddle.net/QkLMT/3/
- semble bon! Est-il un moyen de détecter la boîte de sélection a été modifiée dans la fonction updatePrice?
- Ajout d'un nouveau violon, la this objet fait référence à l'instruction SELECT qui est changé.
InformationsquelleAutor Niels
0

Qui ne fonctionnent pas sur tous les navigateurs.

Vous aurez envie de quelque chose comme
```
for(var i = 0; i < list.length; i++)
{
   $("#"+list[i]).change(updatePrice);
}
```
en jquery.
- OP spécifié "sans l'aide de jquery ou un autre cadre"
InformationsquelleAutor Wing

Vous devez vous connecter pour publier un commentaire.

Cependant