créer un champ de formulaire optionnel

Bonjour, je suis totalement profane en javascript.

Je crée actuellement un formulaire avec des menus déroulants. Je voudrais que lorsque je sélectionne une option dans un menu, un autre champ à menu déroulant qui était à l'origine caché apparaisse à côté, proposant de nouvelles options plus précises.

On trouve ça de temps à autre sur des sites proposant des formulaires d'inscription qui vous demandent par exemple votre région. Lorsque vous la sélectionner, vous voyer apparaître un nouveau champ qui vous demande de préciser le département de cette région, etc.

En bref, je cherche un script, un tuto, un lien, etc. incluant ce genre d'exemple.

Merci d'avance,

L.C.

Bonjour,
Deux solutions sont possibles, cela dépend d'où tu tires tes informations. Viennent-elles d'une base de données ou les a tu écrites manuellement en HTML ?

Si elles viennent d'une base de données il faudra t'orienter vers l'AJAX, qui te permettra d'executer des scripts afin de récupérer dynamiquement des informatios à partir d'une source quelconque.

Si tu les as écrites manuellement, tu peux faire çà facilement en javascript en utilisant la propriété display:none / block; CSS.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
 
	function changeSelect(selectedItem){
		switch(selectedItem.value){
			case "Direction" :
				document.getElementById('X').style.display = "block";
				document.getElementById('B').style.display = "none";
				document.getElementById('Z').style.display = "none";
				document.getElementById('Y').style.display = "none";
				document.getElementById('H').style.display = "none";
				document.getElementById('M').style.display = "none";
			break;	
			case "Projet" :
				document.getElementById('X').style.display = "none";
				document.getElementById('B').style.display = "block";
				document.getElementById('Z').style.display = "none";
				document.getElementById('Y').style.display = "none";
				document.getElementById('H').style.display = "none";
				document.getElementById('M').style.display = "none";
			break;
			case "Studio" :
				document.getElementById('X').style.display = "none";
				document.getElementById('B').style.display = "none";
				document.getElementById('Z').style.display = "block";
				document.getElementById('Y').style.display = "block";
				document.getElementById('H').style.display = "none";
				document.getElementById('M').style.display = "none";
			break;
			case "Developpemnt" :
				document.getElementById('X').style.display = "none";
				document.getElementById('B').style.display = "none";
				document.getElementById('Z').style.display = "none";
				document.getElementById('Y').style.display = "none";
				document.getElementById('H').style.display = "block";
				document.getElementById('M').style.display = "block";
			break;
		}
 
	}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<select name="Postes" onchange="changeSelect(this.options[this.selectedIndex]);">
	<option value="Direction">Direction</option>
	<option value="Projet">Projet</option>
	<option value="Studio">Studio</option>
	<option value="Developpement">Développement</option>
</select>
<select name="Personnes" id="Personnes">
	<option value="Mr.X" id="X" style="display:none;">Mr.X</option>
	<option value="Mme.B" id="B" style="display:none;">Mr.X</option>
	<option value="Mr.Z" id="Z" style="display:none;">Mr.X</option>
	<option value="Mr.Y" id="Y" style="display:none;">Mr.X</option>
	<option value="Mme.H" id="H" style="display:none;">Mr.X</option>
	<option value="Mr.M" id="M" style="display:none;">Mr.X</option>
</select>

J'ai écrit ca vite il y a peut-être quelques erreurs.

Merci de l'info, je vais exploiter la partie manuelle, car en effet j'ai écrit ce formulaire en html