Discussion :

[waida]

bonjour,

une petite aide serai la bienvenu svp

j'ai 2 boutons radio et ce que j'aimerai ce que lorque l'utilisateur click sur la bouton n°1 une liste déroulante s'affiche mais s'il click sur le bouton n°2 ici 2 liste deroulante s'affiche.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<fieldset   style="padding:10px; width:350px; ">
	<legend >Niveau Hiérarchique </legend>
		<form action='' method='POST' name="choix">
		<br>
			<input type="radio" name="choix" value="1" >département
			<input type="radio" name="choix" value="2" >niveau1
		</form>
</fieldset>

je pense qu'il faut utiliser du javascript mais je suis pas trés douté avec language

merci aux personnex qui pourront m'aider

[SylvainPV]

Un petit effort sur la grammaire et l'orthographe SVP, j'ai du mal à déchiffrer

Pour réagir aux changements sur un bouton radio, c'est l'évènement change:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2

<input type="radio" name="choix" value="1" onchange="afficherListeDepartements()" >département<input type="radio" name="choix" value="2" onchange="afficherListeNiveaux()">niveau1

Ensuite pour afficher une liste, à supposer qu'elle soit déjà dans le HTML et cachée en CSS avec display:none, il suffit de la sélectionner et de passer sa propriété display à block:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function afficherListeDepartements(){
document.getElementById("listeDepartements").style.display = "block";
}

[waida]

Ah oui effectivement désolé.

Merci pour ton aide.

Mon problème est que la liste déroulante n°1 reste affichée alors que j'aimerais qu'elle disparaisse lorsque je sélectionne le bouton radio n°2.

[sekaijin]

display: none

A+JYT

[waida]

Merci

la solution

Javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function afficherListeNiveaux(){					   
 document.getElementById("afficherListeNiveaux").style.display = "block";    
	document.getElementById("afficherListeDepartement").style.display = "none";    
}
function afficherListeDepartement(){
	document.getElementById("afficherListeDepartement").style.display = "block";    
	document.getElementById("afficherListeNiveaux").style.display = "none";    
}