Liste déroulante dynamique javascript

Résolu/Fermé

okbabb Messages postés 57 Date d'inscription samedi 23 avril 2022 Statut Membre Dernière intervention 15 mai 2023 - 17 avril 2023 à 19:39
okbabb Messages postés 57 Date d'inscription samedi 23 avril 2022 Statut Membre Dernière intervention 15 mai 2023 - 17 avril 2023 à 23:19

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.

A voir également:

Javascript menu déroulant dynamique
Tableau croisé dynamique - Guide
Menu déroulant excel - Guide
Excel menu déroulant en cascade - Guide
Menu déroulant google sheet - Accueil - Guide bureautique
Telecharger javascript - Télécharger - Langages

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
17 avril 2023 à 20:18

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.

okbabb Messages postés 57 Date d'inscription samedi 23 avril 2022 Statut Membre Dernière intervention 15 mai 2023
17 avril 2023 à 23:19

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.

Discussions similaires

Suppression listes déroulantes

Supprimer liste déroulante Excel

Effacer liste déroulante

Nom de champs du tableau croisé dynamique non valide

supprimer une liste déroulante