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

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

<!DOCTYPE html>

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

<!– Debut entete –>
<head>

<!– Debut du code Javascript –>
<script language=« javascript » type=« text/javascript »>
<!–

[$[Get Code]]

// 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

[$[Get Code]]

//–>
</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>