[JS]Afficher une liste deroulante

En fonction d'une autre liste deroulante

7 janvier 2006 à 8:44:04

Salut
J'ai un formulaire et j'aimerais afficher une liste deroulante en fonction du choix d'un autre liste deroulante
un petit exemple:
[liste deroulante]
-chaussure
-tee-shirt
-bague

la personne clique sur chaussure
et hop, apparait une autre liste pour choisir sa pointure
[liste deroulante]
-39
-40
-42

si la personne avait choisi bague
une autre liste deroulante aurait apparu pour choisir la matiere
[liste deroulante]
-or
-argent

Voila, je ne m'y connait pas en javascript et je viens vous demandez votre aide
Ce serait sympa si quelqu'un pouvait m'aider ou bien si quelqu'un avait un script qui revenait a la meme chose (exemple: un script qui permmettrait de cacher des options d'une liste deroulante en fonction d'une autre)
Merci

D@nny

8 janvier 2006 à 5:25:11

personne?

gael

8 janvier 2006 à 7:11:21

Lis les cours de php et tu regarde le chapitre sur les variables et les conditions ainsi que les formulaires, car ca m'étonnerait que tu puisse faire ca en javascript

D@nny

8 janvier 2006 à 11:50:11

En php, je pourrais le faire mais sur deux pages (ou bien sur la meme page mais ce sera toujours apres un reload)
Je croit avoir deja vu cela quelque part, mais sinon personne a une autre maniere de faire qui reviendrait au meme?

rOse

8 janvier 2006 à 12:13:33

Slu, regarde dans les sources de mambo ; Aux pages admin, lors de la création d'un article.

A+ PiNpRiCk

Edit : si tu trouve pas et que j'ai la flem de te trouver le morceau de code, il y a bien une _autre_ technique, celle de faire comme ceci :

-> partie1 - contenu1
-> partie1 - contenu2
-> partie1 - contenu3
-> partie2 - contenu1
-> partie2 - contenu2
-> partie2 - contenu3

b.moyet

8 janvier 2006 à 12:25:47

Si c'est tout a fait faisable,

Le principe c'est de mettre un evenement sur ta premier liste qui dit onChange="fonction_js(this.form)" (note: je ne connait pas l'evenement donc t'etonne pas si onChange marche pas :-°

).

Dans ta fonction tu récupère la valeur de ta première liste :

function liste_assoce(form){
var choix = form.elements['account'].value;
}

Ensuite tu fais un switch ou un if. Après il faut modifier le contenu de ta deuxième liste.

var select = document.getElementById("liste2"); //la tu met l'id que tu as pris soin de mettre sur le select de ta deuxième liste
var option1 = document.createElement("option1");
var option2 = document.createElement("option2");
var option3 = document.createElement("option3");
//...autant dont tu as besoin
var choix1 = document.createTextNode("choix1");
var choix2 = document.createTextNode("choix2");
var choix3 = document.createTextNode("choix3");
//...autant de choix que d'option
option1.appendChild(choix1);
option1.setAttribute("value","choix1");
//...a repeter avec toutes tes choix
select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);
//...a repeter avec toutes tes balises options crées

Voila a peu près le code dont tu à besoin...alors a noter que j'ai utiliser le DOM et qu'il existe une fonction javascript propriètaire de ie (mais qui marche aussi sous ff) innertHTML....

document.getElementById("liste2").innertHTML = "nouveau code html";

Alors je te l'accorde c'ets plus rapide et plus facile à comprendre mais ce n'est pas "propre" (mais c'est un bon début pour utiliser le DHTML).

Sachant que ce que je t'ai donné ne nettoie pas la liste...donc si il n'y avait rien avant tant mieux sinon il faut la nettoyer. Alors la c'est un peu plus dur mais tout à fait faisable avec des removeChild().