Bonjour,
Ce script est tutorial simple pour expliquer le fonctionnement de deux liste liées.
Pour modifier le script à ce qu'il utilise plusieurs listes déroulantes.
il faut modifier la fonction sendData dans la partie JS comme suit :
<script type="text/javascript">
/**
* Permet d'envoyer des données en GET ou POST en utilisant les XmlHttpRequest
*/
function sendData(param, page, divpart)
{
if(document.all)
{
//Internet Explorer
var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
}//fin if
else
{
//Mozilla
var XhrObj = new XMLHttpRequest();
}//fin else
//définition de l'endroit d'affichage:
var content = document.getElementById(divpart);
XhrObj.open("POST", page);
//Ok pour la page cible
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);
}//fin fonction SendData
</script>
Explication : on a ajouté une variable divpart qu'on va utilisé pour définir la partie à être modifier dynamiquement.
ensuite chaque liste est identifiée par un div. exemple
<div id="liste2">
Liste2
</div>
<div id="liste3">
Liste3
</div>
<div id="liste4">
Liste4
</div>
etc ...
et pour chaque liste on ajoute l'événement OnChange pour appeller la page de chargement depuis le serveur pour modifier dynamiquement la liste suivante exemple :
voici la première liste qui modifie la deuxième liste
<select size="1" name="liste1" OnChange="sendData('id='+this.value,'modifliste2.php','liste2')">
</select>
Voici la deuxième liste qui va modifié la troisième:
<select size="1" name="liste2" OnChange="sendData('id='+this.value,'modifliste3.php','liste3')">
</select>
etc...
et tu n'aura à créer les pages modifliste2.php, modifliste3.php, etc...
Cela dit tu peux optimisé le code à ce qu'il utilise uniquement modifliste.php pour toute les liste en utilisant des tests.
Bonne continuation.
PS: Si votre problème est résolu, prière de bien vouloir clôturer votre message par une réponse acceptée !
http://perso.wareteam.com
http://freelance.wareteam.com