3 listes déroulantes interconnectées
zibizibi
-
ted470 Messages postés 29 Statut Membre -
ted470 Messages postés 29 Statut Membre -
Salut à tous,
J'ai 3 listes déroulantes : (1) Thème général, (2) Sous-thème, et (3) Sous-sous-thème.
Quand on choisit un thème général, la liste (2) se rafraichit pour n'afficher que les sous-thèmes liés au thème général sélectionné. Ca, j'arrive à faire (en Ajax, que je connais encore très mal)
Le problème est qu'une fois qu'on sélectionne un sous-thème dans la liste (2), je veux que la liste (3) s'actualise à son tour, pour n'afficher que les sous-sous-thèmes liés au sous-thème sélectionné. Je sais pas si c'est clair !
J'ai 3 pages. La principale contient le form, il s'agit de index.php :
[ index.php ]
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT type="text/javascript">
function sendData(param, page, num)
{
if(document.all) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ; // IE
else var XhrObj = new XMLHttpRequest(); // Mozilla
if (num==2)
var content = document.getElementById("liste2");
else
{
if (num==3)
var content = document.getElementById("liste3");
}
XhrObj.open("POST", page);
XhrObj.onreadystatechange = function()
{
if (XhrObj.readyState == 4 && XhrObj.status == 200)
content.innerHTML = XhrObj.responseText ;
}
XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XhrObj.send(param);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="onsenfout.php">
<SELECT name="cat1" OnChange="sendData('id='+this.value,'liste2.php', 2)" onKeyUp="sendData('id='+this.value,'liste2.php', 2)">
<OPTION VALUE=""></OPTION>
<OPTION VALUE="5">valeur1</OPTION>
</SELECT>
<br><br>
<div id="liste2">
<SELECT name="cat2" OnChange="sendData('id='+this.value,'liste3.php', 3)" onKeyUp="sendData('id='+this.value,'liste3.php', 3)">
</SELECT>
</div>
<br>
<div id="liste3">
<SELECT name="cat3"></SELECT>
</div>
</FORM>
</BODY>
Puis il y a 2 autres pages qui contiennent chacune ce que devrait contenir le liste des sous-thèmes et celle des sous-sous-thèmes :
[ liste2.php ]
<SELECT name="cat2">
<OPTION VALUE="t">liste2_valeur1</OPTION>
<OPTION VALUE="t">liste2_valeur2</OPTION>
</SELECT>
[ liste3.php ]
<SELECT name="cat3">
<OPTION VALUE="t">liste3_valeur1</OPTION>
<OPTION VALUE="t">liste3_valeur2</OPTION>
<OPTION VALUE="t">liste3_valeur3</OPTION>
<OPTION VALUE="t">liste3_valeur4</OPTION>
</SELECT>
Ces 2 dernières pages affichent n'importe quoi, mon problème ne se situe pas à ce niveau. Quand on sélectionne quelquechose dans la liste (1), la liste (2) s'actualise en lisant ce qu'il y a dans la page liste2.php
Mon problème est que quand on sélectionne ensuite quelquechose dans la liste (2), il se passe rien du tout. Le broswer ne lit même pas la page "liste3.php" et la liste (3) ne s'actualise pas. Pouvez-vous résoudre ce problème ?
Zibizibi.
J'ai 3 listes déroulantes : (1) Thème général, (2) Sous-thème, et (3) Sous-sous-thème.
Quand on choisit un thème général, la liste (2) se rafraichit pour n'afficher que les sous-thèmes liés au thème général sélectionné. Ca, j'arrive à faire (en Ajax, que je connais encore très mal)
Le problème est qu'une fois qu'on sélectionne un sous-thème dans la liste (2), je veux que la liste (3) s'actualise à son tour, pour n'afficher que les sous-sous-thèmes liés au sous-thème sélectionné. Je sais pas si c'est clair !
J'ai 3 pages. La principale contient le form, il s'agit de index.php :
[ index.php ]
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT type="text/javascript">
function sendData(param, page, num)
{
if(document.all) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ; // IE
else var XhrObj = new XMLHttpRequest(); // Mozilla
if (num==2)
var content = document.getElementById("liste2");
else
{
if (num==3)
var content = document.getElementById("liste3");
}
XhrObj.open("POST", page);
XhrObj.onreadystatechange = function()
{
if (XhrObj.readyState == 4 && XhrObj.status == 200)
content.innerHTML = XhrObj.responseText ;
}
XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XhrObj.send(param);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="onsenfout.php">
<SELECT name="cat1" OnChange="sendData('id='+this.value,'liste2.php', 2)" onKeyUp="sendData('id='+this.value,'liste2.php', 2)">
<OPTION VALUE=""></OPTION>
<OPTION VALUE="5">valeur1</OPTION>
</SELECT>
<br><br>
<div id="liste2">
<SELECT name="cat2" OnChange="sendData('id='+this.value,'liste3.php', 3)" onKeyUp="sendData('id='+this.value,'liste3.php', 3)">
</SELECT>
</div>
<br>
<div id="liste3">
<SELECT name="cat3"></SELECT>
</div>
</FORM>
</BODY>
Puis il y a 2 autres pages qui contiennent chacune ce que devrait contenir le liste des sous-thèmes et celle des sous-sous-thèmes :
[ liste2.php ]
<SELECT name="cat2">
<OPTION VALUE="t">liste2_valeur1</OPTION>
<OPTION VALUE="t">liste2_valeur2</OPTION>
</SELECT>
[ liste3.php ]
<SELECT name="cat3">
<OPTION VALUE="t">liste3_valeur1</OPTION>
<OPTION VALUE="t">liste3_valeur2</OPTION>
<OPTION VALUE="t">liste3_valeur3</OPTION>
<OPTION VALUE="t">liste3_valeur4</OPTION>
</SELECT>
Ces 2 dernières pages affichent n'importe quoi, mon problème ne se situe pas à ce niveau. Quand on sélectionne quelquechose dans la liste (1), la liste (2) s'actualise en lisant ce qu'il y a dans la page liste2.php
Mon problème est que quand on sélectionne ensuite quelquechose dans la liste (2), il se passe rien du tout. Le broswer ne lit même pas la page "liste3.php" et la liste (3) ne s'actualise pas. Pouvez-vous résoudre ce problème ?
Zibizibi.
A voir également:
- 3 listes déroulantes interconnectées
- Listes déroulantes excel - Guide
- Ai suite 3 - Télécharger - Optimisation
- Listes déroulantes en cascade excel - Guide
- Picasa 3 - Télécharger - Albums photo
- Photorecit 3 - Télécharger - Visionnage & Diaporama
