Select : les boîtes de sélection

Inhaltsverzeichnis

La balise HTML <select> permet de choisir une option parmi une liste, le plus généralemenat dans un formulaire.

Propriétés de select

Propriétés 
Propriété | Description |
class | Liste de classes |
dir | Direction du texte |
disabled | Désactivation |
id | Identifiant unique |
lang | langue de base |
multiple | sélection multiple |
name | nom du champ |
size | nombre de lignes visibles |

Exemple avec select

Une liste de sélection se présente sous cette forme:

  1. <form id="exemple">
  2.   Choisissez la page de destination:
  3.   <select name="autrepge" onchange="location=this.options[this.selectedIndex].value">
  4.     <option selected="selected" value="">------ Vers les autres pages ------</option>
  5.     <option value="https://www.gaudry.be/de/">Accueil du site</option>
  6.     <option value="#html-select-properties">Propri&eacute;t&eacute;s</option>
  7.     <option value="https://www.gaudry.be/de/javascript-form.html">document.form</option>
  8.     <option value="#option">Tag option</option>
  9.   </select>
  10. </form>

Résultat

Choisissez la page de destination:

Accès à l'élément select

Nous pouvons par exemple accéder à l'élément select de notre formulaire dans une méthode.

  1. <html>
  2. <head>
  3. 	<script type="text/javascript">
  4. 	//<![CDATA[
  5. 		function nav(){
  6. 			var list = document.exemple.autrepge;
  7. 			location = list.options[list.selectedIndex].value;
  8. 		}
  9. 	//]]>
  10. 	</script>
  11. </head>
  12. <body>
  13. 	<form id="exemple">
  14. 	  Choisissez la page de destination:
  15. 	  <select name="autrepge" onchange="nav()">
  16.     <option selected="selected" value="">------ Vers les autres pages ------</option>
  17.     <option value="https://www.gaudry.be/de/">Accueil du site</option>
  18.     <option value="#html-select-properties">Propri&eacute;t&eacute;s</option>
  19.     <option value="https://www.gaudry.be/de/javascript-form.html">document.form</option>
  20.     <option value="#option">Tag option</option>
  21. 	  </select>
  22. </form>
  23. </body>

Il est nécessaire de combiner l'utilisation des propriétés de select et de option afin d'extraire la valeur sélectionnée par le visiteur pour déterminer l'action correspondante.

Une des propriétés de select qui nous intéresse dans le cas de notre exemple est la propriété selectedIndex, qui permet au script de déterminer quelle est la valeur actuellement sélectionnée. La syntaxe de référence aux valeurs de cette propriété est la suivante :

document.form[0].nom_select.selectedIndex


ou bien:

document.nom_form.nom_select.selectedIndex

option

Propriétés 
Propriété | Description |
class | Liste de classes |
dir | Direction du texte |
disabled | Désactivation |
id | Identifiant unique |
label | Intitulé pour une option |
lang | langue de base |
selected | option sélectionnée |

Deutsche Übersetzung

Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.

Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.

Vielen Dank im Voraus.

Dokument erstellt 19/03/2002, zuletzt geändert 06/11/2018
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/javascript-select.html

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.