Discussion :

[yarael92]

Bonjour à tous,

J'ai beau chercher et je ne trouve pas vraiment d'explication simple à ce que je cherche à faire et je pense que cela ce fait en javascript mais je n'y connais pas grand chose.

En fait, sur une de mes pages, je souhaiterais proposé à l'utilisateur plusieurs choix via plusieurs bouton radio et qu'en fonction du bouton activé cela affiche le menu déroulant correspondant.

Pour réaliser les boutons radio et les menu déroulant pas de soucis, en revanche combiné les deux...

Merci d'avance à vous tous.

[SylvainPV]

Salut, je t'ai fait un exemple : http://jsfiddle.net/GB8mL/

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<input name="choixmenu" type="radio" value="menu1">Menu 1</input>
<input name="choixmenu" type="radio" value="menu2">Menu 2</input>
<input name="choixmenu" type="radio" value="menu3">Menu 3</input>
 
<select class="selectmenu" id="menu1">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
 
<select class="selectmenu" id="menu2">
    <option>d</option>
    <option>e</option>
    <option>f</option>
</select>
 
<select class="selectmenu" id="menu3">
    <option>g</option>
    <option>h</option>
    <option>i</option>
</select>

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function showMenu(selectedMenu){
    var selects = document.querySelectorAll("select.selectmenu");
    for(var i=0; i<selects.length; i++){
       var isVisible = (selects[i].getAttribute("id") === selectedMenu);
       selects[i].style.display = isVisible ? "block" : "none";
    }
}
 
var radios = document.getElementsByName("choixmenu");
for(var e=0; e<radios.length; e++){
    radios[e].addEventListener("click", function(){
        if(this.checked){
            showMenu(this.value);           
        }
    });
}
 
showMenu("aucun_au_depart");

En espérant que ça t'aide
A+

[yarael92]

Merci beaucoup !

[SylvainPV]

A noter que l'évènement click utilisé sur les boutons radio ne convient pas si le bouton est sélectionné avec le clavier. Et l'évènement "change" fonctionne mal avec les boutons radio selon le navigateur, ce qui rend les choses assez compliquées. Si l'accessibilité est importante, il vaudrait peut-être mieux rajouter les évènements focus et blur par prudence :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
radios[e].addEventListener("click", onRadioChange);
radios[e].addEventListener("focus", onRadioChange);
radios[e].addEventListener("blur", onRadioChange);
 
function onRadioChange(){
        if(this.checked){
            showMenu(this.value);           
        }
}