Le Javascript est un langage de programmation très populaire qui permet aux développeurs web de créer des sites web dynamiques et interactifs. Une des fonctionnalités les plus utiles de Javascript est la possibilité de récupérer la valeur de la sélection courante d’une liste déroulante. Dans cet article, nous allons examiner en détail comment récupérer cette valeur et comment l’utiliser pour créer des sites web plus interactifs et intuitifs.
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
<!– 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 –>
