JSFiddle - React, Tailwind, and code Playground
HTML
<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>
JavaScript
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");
console.log(radios);
for(var e=0; e<radios.length; e++){
radios[e].addEventListener("click", function(){
console.log(this, this.checked, this.selected);
if(this.checked){
showMenu(this.value);
}
});
}
showMenu("aucun_au_depart");