JavaScript : Récupérer la valeur d’une liste déroulante

vendredi 14 mai 2010, par bluegyn_spip

En HTML la liste déroulante s’écrit : SELECT

<form>



  <select>



  </select>



</form>

Et chacun des choix de la liste s’écrit : OPTION

<select>



  <option> </option>



</select>

EXEMPLE

<form>

  <select>



  <option>Choix 1</option>

  <option>Choix 2</option>

  <option>Choix 3</option>



  </select>

</form>

Pour récupérer le numéro du choix cliqué dans un champ texte :

selectedIndex

<form>



  <input name="texte" type="TEXT"/> 



  <select onclick="this.form.texte.value=this.selectedIndex;">



  <option>Choix 1</option>

  <option>Choix 2</option>

  <option>Choix 3</option>



  </select>

</form>

this.form.texte.value=this.selectedIndex ;

this est un pointeur générique de l’objet courant (comme self ou me)

this.form

désigne le formulaire en cours

this	désigne l’objet lui même dans ce formulaire

Pour récupérer le texte du choix cliqué dans un champ texte :

options.text

Il suffit d’appliquer le numéro du choix (précédent) à la collection OPTIONS

<form>



<input name="texte" type="TEXT"/> 



<select onclick=



 "this.form.texte.value=



    this.options[this.selectedIndex].text;">



  <option>Choix 1</option>

  <option>Choix 2</option>

  <option>Choix 3</option>



  </select>

</form>

this.form.texte.value=this.options[this.selectedIndex].text ;

JavaScript : Récupérer la valeur d’une liste déroulante

EXEMPLE

Programmes

Dans la même rubrique