View  Edit  Attributes  History  Attach  Print  Search

Javascript : Récupérer la valeur de la sélection courante d'une liste déroulante.

Ce que l'on va faire ici

  • Dans ce code Javascript intégré dans une page HTML, on va récupérer la valeur de la sélection courante d'une liste déroulante.

Le code HTML + Javascript


<!DOCTYPE html>

<!-- Debut de la page -->
<html>

        <!-- Debut entete -->
        <head>

                <meta charset="utf-8" /> <!-- Encodage de la page  -->
                <title>Titre </title> <!-- Titre de la page -->

                <!-- Debut du code Javascript  -->
                <script language="javascript" type="text/javascript">
                <!--    

 


                        // code Javascript

                        //--- variables globales ---
                        var myselect=null; // objet global

                        //--- fonction appelee au chargement de la page
                         window.onload = function () { // au chargement de la page        

                                        // code Javascript ici, avec sa syntaxe specifique...

                                        print("Javascript OK")

                                        myselect=document.getElementById("liste")

                                        for (var i=0; i<myselect.options.length; i++){

                                                        print("Option index "+i + ":" + myselect.options[i].text + " (" + myselect.options[i].value + ")") // affiche la liste des options

                                        } // fin for                  

           } // fin onload

                                //---- fonctions utiles ---

                                function print(textIn) { // fonction pour ajouter un element a la page - utile ++ pour debug

                         // Ajouter un élément à la page sans effacer le reste
                                        //var txt = 'Hello';

                                        var txt=textIn;

                                        var newtext = document.createTextNode(txt);
                                        document.body.appendChild(newtext);

                                        document.body.appendChild(document.createElement("br")); // ajoute saut de ligne

                                        document.body.appendChild(newtext);  

                                } // fin print


            // fonction de gestion d'un changement select
                                function onchangeSelect(indexIn){

                                        print ("Index courant ="+indexIn + " soit : " + myselect.options[indexIn].text);

                                } // fin fonction onchangeSelect
 

                //-->
                </script>
                <!-- Fin du code Javascript -->


        </head>
        <!-- Fin entete -->

        <!-- Debut Corps de page  -->
        <body >

                <select  style="width: 300px" id="liste" onchange="onchangeSelect(this.selectedIndex)">
                        <option value="Choix 1" label="Volvo">Volvo</option>
                        <option value="Choix 2" label="Audi">Audi</option>
                        <option value="Choix 3" label="Renault">Renault</option>
                        <option value="Choix 4" label="Peugeot">Peugeot</option>

                </select>

        </body>
        <!-- Fin de corps de page   -->

</html>
<!-- Fin de la page   -->