Liste déroulante dynamique javascript
Résolu
Bonjour,
J'ai 2 listes déroulante Select:
<div class="form-group"> <label for="continent" class="control-label col-lg-4">Continent</label> <div class="col-lg-4"> <select name="continent" id="continent" class="form-control"> <option value="" selected>Choisir un continent</option> <option value="Europe">Europe</option> <option value="Afrique">Afrique</option> </select> </div> </div> <div class="form-group"> <label for="pays" class="control-label col-lg-4">Pays</label> <div class="col-lg-4"> <select name="pays" id="pays" class="form-control"> <option value="" selected>Choisir un pays</option> <option value="France">France</option> <option value="Tunisie">Tunisie</option> </select> </div> </div>
Je veux (en javascript) que la deuxième liste déroulante (pays) ne s'affiche que si on choisir un continent (la première liste déroulante),
Merci.
1 réponse
-
Modérateur
Bonjour,
Il te suffit de jouer avec le style display de ta seconde liste
Et pour détecter le changement .. tu as l'event CHANGE que tu peux appliquer à ta première liste.
...
Reviens nous voir avec le code que tu auras essayé de faire si tu rencontres encore des soucis, à ce moment, on verra pour t'aider à le corriger.
-
Merci bien jordane45,
A l'aide de vous et une recherche sur Internet, j'ai réussi de résoudre le problème.
Fonction javascript dans le head:
<script> function showPays() { var selectBox =document.getElementById('continent'); var userInput =selectBox.options[selectBox.selectedIndex].value; if (userInput !='') { document.getElementById('div_pays').style.display =''; } else { document.getElementById('div_pays').style.display ='none'; } return false; } </script>et la modification suivante dans la partie div et select:
<div class="form-group"> <label for="continent" class="control-label col-lg-4">Continent</label> <div class="col-lg-4"> <select name="continent" id="continent" class="form-control" onChange="return showPays();"> <option value="" selected>Choisir un continent</option> <option value="NL">Europe</option> <option value="Afrique">Afrique</option> </select> </div> </div> <div class="form-group" id="div_pays" style="display: none"> <label for="pays" class="control-label col-lg-4">Pays</label> <div class="col-lg-4"> <select name="pays" id="pays" class="form-control"> <option value="" selected>Choisir un pays</option> <option value="France">France</option> <option value="Tunisie">Tunisie</option> </select> </div> </div>Merci.
-
