18041 sujets

Questions générales et questions de débutants

Récupérer valeur liste déroulante

Bonjour,

J'ai une liste déroulante contenant des pays.

Comment faire pour que lorsque je clique sur la ligne "France" par exemple, un message "vous avez cliqué sur France" s'affiche ?

Voici le code : 

<select name="CountryList" id="liste_déroulante" class=form-control style="width:auto;font-size: 10px;height:auto; margin-left:60px">
                                <option id="a" name="a" value=Choose onclick="inspect()">---Choose a continent or a country---</option>
                                <option name="b" value=Continent>---Choose a continent---</option>
                                <option name="c" id="continent1" value=Afrique>Afrique</option>
                                <option name="d" id="continent2" value=Amérique>Amérique</option>
                                <option name="e" id="continent3" value=Asie>Asie</option>
                                <option name="f" id="continent4" value=Europe>Europe</option>
                                <option name="g" id="continent5" value=Océanie>Océanie</option>
                                <option name="h" value=Country>---Choose a country---</option>
                                <option name="i" id="Pays1" value=Arizona>Arizona</option>
                                <option name="j" id="Pays2" value=Utha>Utha</option>
                                <option name="k" id="Pays3" value=France>France</option>
                                <option name="l" id="Pays4" value=Allemagne>Allemagne</option>
                                <option name="m" id="Pays5" value=Alaska>Alaska</option>
                                <option name="n" id="Pays6" value=Indiana>Indiana</option>
                                <option name="o" id="Pays7" value=Angleterre>République Démocratique du Congo</option>
                            </select>



Le but de cette question est de récupérer/stocker la valeur sur laquelle l'utilisateur clique.

Merci !
Merci Zelalsan, c'est parfait.
Une autre petite question si vous savez : comment rendre incliquable certaines lignes de ma liste déroulante ?
Par exemple dans mon code précédent, je voudrais que les lignes "Choose a continent or a country", "Choose a continent", et "Choose a country" ne soient pas cliquables.

Y-a-t-il une solution svp ?
Super, sauf que maintenant par défaut ca me sélectionne l'afrique. J'aimerais que ca continue à me sélectionner "Choose a continent or a country".
Mais avec ce code ca ne fonctionne pas : 

 <select name="CountryList" id="liste_déroulante" class=form-control style="width:auto;font-size: 10px;height:auto; margin-left:60px">
                                <optgroup label="Choose a continent or a country" style="color:black"</option>
                                <optgroup label="Choose a continent" style="color:black"</option>
                                <option name="c" id="continent1" value=Afrique>Afrique</option>
                                <option name="d" id="continent2" value=Amérique>Amérique</option>
                                <option name="e" id="continent3" value=Asie>Asie</option>
                                <option name="f" id="continent4" value=Europe>Europe</option>
                                <option name="g" id="continent5" value=Océanie>Océanie</option>
                                <optgroup label="Choose a country" style="color:black"</option>
                                <option name="i" id="Pays1" value=Arizona>Arizona</option>
                                <option name="j" id="Pays2" value=Utha>Utha</option>
                                <option name="k" id="Pays3" value=France>France</option>
                                <option name="l" id="Pays4" value=Allemagne>Allemagne</option>
                                <option name="m" id="Pays5" value=Alaska>Alaska</option>
                                <option name="n" id="Pays6" value=Indiana>Indiana</option>
                                <option name="o" id="Pays7" value=Angleterre>République Démocratique du Congo</option>
                            </select>
                            <!--lm modif : début pour récupérer la valeur de la ligne sur laquelle je clique-->
                            <script type="text/javascript">
                            	document.querySelector("select").addEventListener("change", function (){
									alert(this.value);
								}, false);
                            </script>
Modérateur
Mettre une première valeur en option «disabled» permet en effet de s'assurer que le onchange soit bien lancé et que l'utilisateur choisisse consciemment une valeur (en provoquant une erreur du formulaire sur cette valeur).


<select>
  <option value="none" style="color:black" selected disabled>--Choose a continent or a country--</option>
  <optgroup label="Choose a continent" style="color:black">
    <option name="c" id="continent1" value=Afrique>Afrique</option>
    <option name="d" id="continent2" value=Amérique>Amérique</option>
    <option name="e" id="continent3" value=Asie>Asie</option>
    <option name="f" id="continent4" value=Europe>Europe</option>
    <option name="g" id="continent5" value=Océanie>Océanie</option>
  </optgroup>
  <optgroup label="Choose a country" style="color:black">
    <option name="i" id="Pays1" value=Arizona>Arizona</option>
    <option name="j" id="Pays2" value=Utha>Utha</option>
    <option name="k" id="Pays3" value=France>France</option>
    <option name="l" id="Pays4" value=Allemagne>Allemagne</option>
    <option name="m" id="Pays5" value=Alaska>Alaska</option>
    <option name="n" id="Pays6" value=Indiana>Indiana</option>
    <option name="o" id="Pays7" value=Angleterre>République Démocratique du Congo</option>
  </optgroup>
</select>

Modifié par kustolovic (16 Aug 2016 - 17:01)
Sujet clos
Aller à