JavaScript sélectionnez l'Élément

Résumé: dans ce tutoriel, vous apprendrez comment gérer la balise <select> élément en JavaScript.

Introduction aux éléments HTML select

Un élément<select> vous fournit une liste d’options. Il vous permet de sélectionner une ou plusieurs options.

Pour former un <select> élément, vous utilisez la balise <select> et <option> éléments., Par exemple:

Au-dessus <select> élément vous permet de sélectionner une seule option à la fois.

Si vous souhaitez que plusieurs sélections, vous pouvez ajouter la balise multiple attribut <select> élément comme suit:

Le HTMLSelectElement type

Pour interagir avec des <select> élément en JavaScript, vous utilisez la balise HTMLSelectElement type.,

Le HTMLSelectElement le type a les propriétés utiles suivantes:

selectedIndex – retourne l’index de base zéro de l’option sélectionnée. La balise selectedIndex est -1 si aucune option n’est sélectionnée. Si le <select> élément permet à de multiples sélections, les éléments selectedIndex retourne le value de la première option.,
value – renvoie la propriété value du premier élément d’option sélectionné s’il y en a un, sinon il renvoie une chaîne vide.
multiple – retourne true si le <select> élément permet à de multiples sélections. Il est équivalent à l’attributmultiple.

La propriété selectedIndex

Pour sélectionner <select> élément, vous utilisez l’API DOM comme getElementById() ou querySelector().,

L’exemple suivant montre comment obtenir l’index de l’option sélectionnée:

Comment cela fonctionne:

tout d’Abord, sélectionnez la balise <button> et <select> éléments à l’aide de la balise querySelector() méthode.
ensuite, attachez un écouteur d’événement de clic au bouton et affichez l’index sélectionné à l’aide de la méthode alert() lorsque vous cliquez sur le bouton.,

La valeur de la propriété

Le value propriété de la balise <select> élément dépend de la balise <option> élément et son HTML multiple attribut:

Si aucune option n’est sélectionnée, la balise value propriété de la zone de sélection est une chaîne vide.
Si l’option est activée et a un value attribut de la balise value propriété de la zone de sélection est la valeur de l’option sélectionnée.,
Si l’option est activée et n’a pas de value attribut de la balise value propriété de la zone de sélection est le texte de l’option sélectionnée.
Si plusieurs options sont sélectionnées, la propriétévalue de la zone de sélection est dérivée de la première option sélectionnée en fonction des deux règles précédentes.

Voir l’exemple suivant:

Dans cet exemple:

Si vous sélectionnez la première option, la balise value propriété de la balise <select> est vide.,
Si vous choisissez la dernière option, la balise value propriété de la zone de sélection est Ember.js parce que l’option sélectionnée n’a pas de value attribut.
Si vous sélectionnez la deuxième ou la troisième option, la valeur de la propriété sera "1"ou "2".

le type HTMLOptionElement

en JavaScript, le typeHTMLOptionElementreprésente l’élément<option>.,

Le HTMLOptionElement le type est la suivante pratique propriétés:

index – l’index de l’option à l’intérieur de l’ensemble des options.
selected – retourne true lorsque l’option est sélectionnée. Vous définissez cette propriété sur true pour sélectionner une option.
text – renvoie le texte de l’option.
value – retourne le code HTML de la valeur de l’attribut.,08″>

Vous pouvez ensuite accéder aux propriétés text Et value de l’option sélectionnée via text Et value:


Code language: JavaScript (javascript)

Si un élément <select> permet plusieurs sélections, vous pouvez utiliser la propriété selected pour déterminer quelles options sont sélectionnées:

dans cet exemple, le sb.options est un objet de type tableau, il n’a donc pas les méthodes filter() comme un objet Array.,

pour emprunter ces méthodes à partir de l’objet Array, vous utilisez la méthode call(). Ainsi, l’exemple suivant renvoie un tableau d’options:


Code language: PHP (php)

Et pour obtenir le text propriété de ces options, la chaîne le résultat de la balise filter() méthode avec la balise map() méthode, comme ceci:


Code language: JavaScript (javascript)

Résumé

Le <select> élément vous permet de sélectionner une ou plusieurs options., Ajoutez l’attributmultiple à l’élément<select> pour activer plusieurs sélections.
Le HTMLSelectElement représente le <select> élément. Utiliser la balise selectedIndex et value pour obtenir l’indice et la valeur de l’option sélectionnée.
Le HTMLOptionElement représente le <option> élément. Si l’option est sélectionnée, la propriétéselected vaut true., La balise selectedText et selectedValue propriétés retour de la balise text et value de l’option sélectionnée.

ce tutoriel a Été utile ?
Ouinon

JavaScript sélectionnez l’Élément