nanoum.net, intégration html/xhtml, css, javascript

javascript

derniers articles

archives

syndication rss

listes de formulaires liées suitemercredi 29 décembre 2004

Suite à une question de Modus sur dream-forum concernant la fonction que j'avais mise sur ce blog il y a quelque temps pour lier les listes de formulaire, voici une petite mise à jour de la fonction qui reprend également les remarques faites par Jep dans les commentaires du premier billet.


La question posée :

Lorsque l'on sélectionne un élément dans une liste, la liste suivante s'affiche bien mais pas les sous listes associées. Il faut pour cela choisir une autre option et revenir à l'option présélectionnée pour que la liste apparaisse.
De même lorsque la page s'ouvre, la liste correspondant à la première option n'est pas présente.


La solution :

Il faut premièrement modifier la fonction en testant si la première option de la liste générée a elle aussi une liste associée et dans ce cas, relancer la fonction pour la faire apparaître.
Il faut également lancer la fonction au chargement de la page pour que les listes puissent être tout de suite générées en fonction de la première option sélectionnée.

Ce qui donnera pour la fonction javascript :
function ajout(selection){
nb_select = selection.parentNode.getElementsByTagName("select").length;
if ( selection == selection.parentNode.getElementsByTagName("select")[nb_select-1] ) {
element_select = selection;
selection = selection.options[selection.selectedIndex].value;
if ( list_choix[selection] ) {
new_liste = document.createElement("select");
element_select.parentNode.appendChild(new_liste);
new_liste.setAttribute("id", "choix"+nb_select);
new_liste.setAttribute("name", "choix"+nb_select);
new_liste.onchange= function () {ajout(this) };
for (var i=0; i<list_choix[selection].length; i++) {
new_option = document.createElement("option");
new_liste.appendChild(new_option);
new_option.setAttribute("value", list_choix[selection][i]);
new_option.text = list_choix[selection][i];
}
}
}
else {
selection.parentNode.removeChild(selection.nextSibling);
ajout(selection);
}
if (list_choix[new_liste.options[0].value]) {
ajout(new_liste)
}
}

Et pour la modification du code html :
<body onload="ajout(document.getElementById(&#039;choix0&#039;))">
<form action="">
<fieldset>
<select name="choix0" id="choix0" onchange="ajout(this)">
<option value="amstramgram">amstramgram</option>
<option value="pifpafpoum">pifpafpoum</option>
<option value="tictac">tictac</option>
</select>
</fieldset>
<p><input type="submit" value="envoyer" /></p>
</form>
</body>

voir la page d'exemple

Commentaires momentanément fermés. Merci de votre compréhension.