OPTION DE SÉLECTION JAVASCRIPT

Nous comprendrons comment gérer < sélectionner > option dans Javascript dans ce tutoriel.

Option de sélection HTML

Une option nous facilite la liste des options. Cela nous permet de choisir une ou plusieurs options. Nous utilisons les éléments et pour former une option.

Par exemple:

 Red Yellow Green Blue

L'option nous permet de choisir une option à la fois mentionnée ci-dessus.

Si nous souhaitons plus d'une sélection, nous pouvons inclure l'attribut à < plusieurs > éléments ci-dessous :

chaîne formatée en c

 Red Yellow Green Blue

Type HTMLSelectElement

Nous utilisons le type HTMLSelectElement pour interagir avec l'option en JavaScript.

Le type HTMLSelectElement contient les attributs utiles suivants :

sélectionnéIndex-Cet attribut donne un index d'options sélectionnées de base zéro. Le selectedIndex sera -1 lorsqu’aucune option n’est choisie. Lorsque l’option autorise plusieurs sélections, le selectedIndex donne la valeur de la première option.valeur-L'attribut value donne l'attribut value du composant option initialement sélectionné s'il y en a un seul, sinon, il renverra les chaînes vides.plusieurs-Les multiples attributs donnent vrai lorsque le composant autorise plus d'une sélection. C'est la même chose que les attributs multiples.

Propriété selectedIndex

Nous appliquons l'API DOM comme sélecteur de requête() ou getElementById() .

L'exemple indique comment obtenir l'indice d'option sélectionné qui est mentionné ci-dessous :

 JavaScript Select Option Demo Select a Color Red Yellow Green Blue Get a Selected Index const btn = document.querySelector(&apos;#btn&apos;); const sb = document.querySelector(&apos;#color&apos;); btn.onclick = (event) =&gt; { event.preventDefault(); alert(sb.selectedIndex); };

Comment ça fonctionne:

Dans un premier temps, sélectionnez les composants et à l’aide de la méthode querySelector().
Après cela, liez l'écouteur d'événement click à ce bouton et affichez l'index sélectionné à l'aide de la méthode alert() si le bouton est enfoncé.

propriété de valeur

La propriété value de l'élément repose sur le composant et les multiples attributs de son HTML :

La propriété value d'une zone de sélection sera une chaîne vide lorsqu'aucune option n'a été sélectionnée.
La propriété value d'une zone de sélection sera la valeur de l'option choisie lorsqu'une option a été choisie et contient l'attribut value.
La propriété value d'une zone de sélection sera le texte de l'option choisie lorsqu'une option a été choisie et ne contient aucun attribut value.
La propriété value d'une zone de sélection sera dérivée de l'option sélectionnée initialement concernant les deux dernières règles lorsque plusieurs options sont choisies.

Considérez l'exemple ci-dessous :

 JavaScript Selected Value Select a Color Red Yellow Green Blue Get a Selected Value const btn = document.querySelector(&apos;#btn&apos;); const sb = document.querySelector(&apos;#color&apos;); btn.onclick = (event) =&gt; { event.preventDefault(); alert(sb.value); };

Dans cet exemple ci-dessus :

L'attribut value de l'élément est vide lorsque nous sélectionnons l'option initiale.
L'attribut value d'une zone de sélection sera Ember.js car l'option choisie ne contient aucun attribut value lorsque nous choisissons la dernière option.
L'attribut value sera « 1 » ou « 2 » lorsque nous choisirons la troisième ou la deuxième option.

Type d'élément HTMLOptionElement

Le type HTMLOptionElement illustre l'élément en JavaScript.

Ce type contient les propriétés suivantes :

Indice- L'index de l'option au sein du groupe d'options.

Choisi- Il renvoie une valeur vraie si l'option est choisie. Nous définissons la propriété sélectionnée sur true pour sélectionner une option.

Texte- Il renvoie le texte de l'option.

Valeur- Il renvoie l'attribut value du HTML.

Le composant contient un attribut option qui nous permet d'accéder aux options de collection :

 selectBox.options

Par exemple, pour accéder à la valeur et au texte de la deuxième option, nous utilisons ce qui suit :

 const text = selectBox.options[1].text; const value = selectBox.options[1].value;

Pour obtenir une option sélectionnée du composant ainsi qu'une sélection individuelle, nous utilisons le code ci-dessous :

 let selectOption = selectBox.options [selectBox.selectedIndex];

Après cela, nous pouvons accéder à la valeur et au texte d'une option sélectionnée par les propriétés de valeur et de texte :

 const selectedText = selectedOption.text; const selectedValue = selectedOption.value;

Lorsque le composant autorise plusieurs sélections, nous pouvons utiliser un attribut sélectionné pour déterminer quelle option est sélectionnée :

 JavaScript Selected Box Select one or more Colors: Red Yellow Green Blue Get a Selected Colors const btn = document.querySelector(&apos;#btn&apos;); const sb = document.querySelector(&apos;#color&apos;); btn.onclick = (e) =&gt; { e.preventDefault(); const selectValues = [].filter.call(sb.options, option =&gt; option.selected).map (option =&gt; option.text); alert(selectedValues); };

Dans l'exemple, le qn.option est l'objet de type tableau. Par conséquent, il ne contient pas la méthode filter() identique à l’objet Array.

Pour emprunter ce type de méthodes via un objet tableau, nous utilisons une méthode call(), ci-dessous donne le tableau des options choisies :

 [].filter.call(sb.options, option =&gt; option.selected)

Et pour obtenir l'attribut text de n'importe quelle option, nous pouvons enchaîner le résultat d'une méthode filter() avec une méthode map() comme ci-dessous :

 .map(option =&gt; option.text);

Pour obtenir l'option sélectionnée en utilisant la boucle for

NOUS pouvons utiliser la boucle for pour parcourir les options de liste sélectionnées afin de déterminer laquelle est choisie. Une fonction pourrait être décrite pour renvoyer la référence à une option sélectionnée ou à la valeur. Ce qui suit donne la référence à une option sélectionnée :

 function getSelectedOption(sel) { var opt; for (var i= 0, len= sel.options.length; i<len; i++) { opt="sel.options[i];" if (opt.selected="==" true) break; } return opt; var console.log(opt.value); console.log(opt.text); < pre> <p>This function gives a single chosen option, which is compatible for the select-one type of select list. The same function compatible for select-multiple type pf select lists could give more than one selected option.</p> <h2>Summary</h2> <ul> <li>The component permits us for selecting one or more options. We can include the multiple property to the component for enabling more than one selections.</li> <li>The HTMLOptionElement illustrates the component. The selected attribute is true if an option is chosen. The selected value and selected text attributes return the value Add the text of the chosen option.</li> <li>The HTMLSelectElement illustrates the component. We can use the value and selected index for getting the value and index of the chosen option.</li> </ul> <hr></len;>

TechCodeview