Menu déroulant si bouton radio coché

Version imprimable

12/09/2013, 08h59
yarael92

Menu déroulant si bouton radio coché

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.:ccool:

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

Code:

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:

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+

13/09/2013, 11h18
yarael92

Merci beaucoup !

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:

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); } }