[AJAX] Remplir une liste déroulante avec la réponse du réquête d'Ajax

Salut,
Je viens de commencer en ajax, j'aimerais savoir comment faire pour pour remplir une liste déroulante avec la réponse obtenu de la requête ajax. Par exemple on a la fonction:

function stateChanged()
{
var tabReponse, reponse;

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
tabReponse = xmlHttp.responseText.split("\n");
reponse = tabReponse.join("<br>");
document.getElementById("ici").innerHTML=reponse;
}
}


réponse =>
1:Mère

2:Père

3:Fille

4:Fils

J'aimerais mettre ces valeures dans une liste déroulante.

Merci d'avance pour votre aide !!

PS: Si possible, me donner un lien ou quelqu'un l'a déjà fait ...

slt,

tu as plusieurs possibilités (et en cherchant un peu sur le forum je suis persuadé que tu aurais pu les trouver)...

1- si ton select existe déjà :
=> ta réponse va être un bout de code JS créant les options :

Code:

---

document.getElementById("id_du_select").options = new Option('texte à afficher','value');

---

et dans ce cas là tu utilises eval() et non innerHTML !

2- ton select n'existe pas :
=> tu auras positionné un conteneur vide là où le select devra apparaître, ta réponse sera un bout de HTML, et là tu utilises innerHTML ;

3- tu peux aussi (dans les deux cas si je ne me trompe pas) passer par le DOM... mais c'est peut-être un poil plus compliqué et je suis pas expert...

Re,

remplace ta ligne :

Code:

---

reponse = tabReponse.join("<br>");

---

par les 3 suivantes :

Code:

---

1 2 3

reponse = "<select>"; for(i=0;i<tabReponse.length;i++) reponse += "<option value='"+tabReponse[i]+"'>"+tabReponse[i]+"</option>"; reponse += "</select>";

---

Citation:

---

Envoyé par duppp2000

Salut,
Je viens de commencer en ajax, j'aimerais savoir comment faire pour pour remplir une liste déroulante avec la réponse obtenu de la requête ajax. Par exemple on a la fonction:

function stateChanged()
{
var tabReponse, reponse;

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
tabReponse = xmlHttp.responseText.split("\n");
reponse = tabReponse.join("<br>");
document.getElementById("ici").innerHTML=reponse;
}
}


réponse =>
1:Mère

2:Père

3:Fille

4:Fils

J'aimerais mettre ces valeures dans une liste déroulante.

Merci d'avance pour votre aide !!

PS: Si possible, me donner un lien ou quelqu'un l'a déjà fait ...

---

Salut, si ça t'intéresse j'ai fait un petit framework qui fait ça.

J'ai placé un div dans mon code html, je peux voir le résultat, mais cela génère pas le select. Faudrait-il que je place un dans le code html aussi?

slt,

renvoie le code de ta page stp et de ta fonction callback

Désolé,
Ce bout de codes fonctionne: reponse = "<select>";
for(i=0;i<tabReponse.length;i++) reponse += "<option value='"+tabReponse[i]+"'>"+tabReponse[i]+"</option>";
reponse += "</select>";

dans un id,mais pas sur le formulaire ..........

Je tiens à vous remercier tous pour vos commentaires, ils m'ont bcp aide. Grâce à certains j'arrive à mettre la réponse de la requête dans un select. J'ai pu aussi faire fonctionner le deuxième select. Toutefois, je n'arrive pas à m'en sortir avec le troisième malgré les exemples qui sont disponible sur le forum. De plus, ce qui me casse encore la tête est le suivant. Sur le formulaire, on doit être en mesure d'effectuer les mêmes choix trois fois. Comme par exemple tu magazine en ligne: tu as trois liste déroulantes qui te permettent de choisir trois produits: J'ai mis le fichier .js et un jpg pour voir de quoi je parle. Toute aide supplementaire serait grandement apprecié ............

slt,

si ton select n'existe pas encore dans ton formulaire :
[code]<span id="ici"></span>[code]
et ton select apparaitra dans cette zone...

si ton select existe déjà, le fichier sur lequel tu fais la requete doit renvoyer un bout de js pour la création de chacune des options, donc de la forme :

Code:

---

document.forms["id_de_ton_form"].elements["id_de_ton_select"].options[i] = new Option('texte à afficher','valeur de value');

---

tu dois donc avoir à la sortie, une ligne par option à créer, i s'incrémentant évidemment ! par contre du coup tu n'utilises plus innerHTML, mais eval(xmlHttp.responseText) !!