Comment remplir des zones de sélection générées dynamiquement avec ajax

Question

Je n'ai pas été en mesure de trouver une solution au problème particulier que j'ai avec ce projet. J'ai besoin de ce qui suit: ajouter dynamiquement des lignes à une table qui contiennent deux boîtes de sélection ET utiliser ajax pour remplir automatiquement les options de sélection de la 2ème boîte de sélection, basée sur la valeur de la première boîte de sélection ... dans la rangée de tableau respective (qui a été ajouté dynamiquement à la volée par quelques js).

Toujours oui?

Je peux facilement remplir, dynamiquement, une liste déroulante en utilisant ajax/javascript en fonction de la valeur de la première liste déroulante, dans la première ligne. Je peux même peupler trois boîtes de sélection ou plus dans la même rangée, en utilisant les fonctions ajax/js pour charger chaque sélection supplémentaire. Pourtant, ce n'est pas mon objectif.

Voici ce que j'ai ... Mon formulaire contient une table simple avec 3 colonnes. La première est une case à cocher, la seconde est la case de sélection "État" et la troisième colonne est la case de sélection "Ville". J'ai deux boutons au-dessus de la table qui me permettent de "Ajouter une ligne" et "Supprimer une ligne". Rappelez-vous, la première rangée (qui est programmée), fonctionne parfaitement pour charger les noms de ville d'un état en utilisant ajax. En cliquant sur le bouton Ajouter une ligne, je peux créer dynamiquement la deuxième ligne, qui contient les cases à cocher, la sélection d'état et la sélection de la ville. La sélection d'état est remplie en fonction du contenu innerHTML de la colonne d'origine, mais la sélection de la ville est évidemment nulle car elle attend que ajax la remplisse. Note: les noms et les noms d'identification de ces champs sont itératifs ... city_id, city_id_1, city_id_2, city_id_3 et ainsi de suite ... donc j'ai ce caractère unique avec lequel travailler. Mon problème réside dans le fait que lorsque je sélectionne un état à partir de la 2ème ou 3ème ligne (et ainsi de suite), seule la première sélectionne les changements. Pourquoi? Parce que la fonction de traitement js/ajax dit de fonctionner uniquement sur l'élément avec le nom "city_id" !! Quel est le nom de la boîte de sélection de la ville dans la première rangée.

Je n'ai pas (encore) trouvé un moyen de passer dynamiquement le nom de l'élément dont j'ai besoin à la fonction ajax onreadystate. Quand j'ai dû remplir deux ou trois cases de sélection à la suite (même rangée), j'ai dû avoir des fonctions ajax complémentaires pour chaque liste déroulante - qui sont statiques, attention ... mais si je crée le élément dynamiquement ?? Je ne peux pas préprogrammer autant de fonctions dans ma page ... ou dois-je?

Si vous avez des idées sur la façon d'accomplir cela, je serais tellement sacrément reconnaissant !!!

Merci!

Answer 1

var i=1; // put here the number of the column being added now. 
var x=document.getElementById("city_id_"+i); 
// populate x