Entendrem com gestionar < seleccionar > opció a JavaScript en aquest tutorial.
HTML Seleccioneu l'opció
Una opció ens facilita la llista d'opcions. Ens permet triar una o més d'una opció. Utilitzem els elements i per formar una opció.
Per exemple:
Red Yellow Green Blue
L'opció ens permet triar una opció a la vegada que s'esmenta més amunt.
Si volem més d'una selecció, podem incloure l'atribut a < múltiples > elements següents:
Sèrie de Fibonacci al c
Red Yellow Green Blue
Tipus HTMLSelectElement
Utilitzem el tipus HTMLSelectElement per interactuar amb l'opció de JavaScript.
El tipus HTMLSelectElement conté els següents atributs útils:
SelectedIndex propietat
Apliquem l'API DOM com querySelector() o getElementById() .
L'exemple indica com obtenir l'índex d'opció seleccionada que s'esmenta a continuació:
JavaScript Select Option Demo Select a Color Red Yellow Green Blue Get a Selected Index const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (event) => { event.preventDefault(); alert(sb.selectedIndex); }; Com funciona:
- Inicialment, seleccioneu els components i amb l'ajuda del mètode querySelector().
- Després d'això, enllaceu l'oient d'esdeveniments de clic a aquest botó i visualitzeu l'índex seleccionat amb l'ajuda del mètode alert() si es prem el botó.
propietat de valor
La propietat de valor de l'element es basa en el component i l'atribut múltiple del seu HTML:
- La propietat de valor d'un quadre de selecció serà una cadena buida quan no s'hagi seleccionat cap opció.
- La propietat value d'un quadre de selecció serà el valor de l'opció escollida quan s'hagi escollit una opció i conté l'atribut value.
- La propietat de valor d'un quadre de selecció serà el text de l'opció escollida quan s'ha escollit una opció i no conté cap atribut de valor.
- La propietat de valor d'un quadre de selecció es derivarà de l'opció seleccionada inicial pel que fa a les dues darreres regles quan es trien més d'una opció.
Considereu l'exemple següent:
JavaScript Selected Value Select a Color Red Yellow Green Blue Get a Selected Value const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (event) => { event.preventDefault(); alert(sb.value); }; En aquest exemple anterior:
- L'atribut value de l'element està buit quan seleccionem l'opció inicial.
- L'atribut de valor d'un quadre de selecció serà Ember.js perquè l'opció escollida no conté cap atribut de valor quan escollim l'última opció.
- L'atribut de valor serà '1' o '2' quan triem la tercera o segona opció.
Tipus HTMLOptionElement
El tipus HTMLOptionElement il·lustra l'element en JavaScript.
Aquest tipus conté les propietats següents:
índex- Índex de l'opció dins del grup d'opcions.
seleccionat- Retorna un valor real si s'escull l'opció. Definim la propietat seleccionada true per seleccionar una opció.
Text- Retorna el text de l'opció.
valor- Retorna l'atribut value d'HTML.
El component conté un atribut d'opció que ens permet accedir a les opcions de col·lecció:
selectBox.options
Per exemple, per accedir al valor i al text de la segona opció, utilitzem el següent:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
Per obtenir una opció seleccionada del component juntament amb una selecció individual, utilitzem el codi següent:
let selectOption = selectBox.options [selectBox.selectedIndex];
Després d'això, podem accedir al valor i el text d'una opció seleccionada per valor i propietats de text:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Quan el component permet més d'una selecció, podem utilitzar un atribut seleccionat per determinar quina opció està seleccionada:
JavaScript Selected Box Select one or more Colors: Red Yellow Green Blue Get a Selected Colors const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (e) => { e.preventDefault(); const selectValues = [].filter.call(sb.options, option => option.selected).map (option => option.text); alert(selectedValues); }; En l'exemple, el opció sb és l'objecte semblant a una matriu. Per tant, no conté el mètode filter() igual que l'objecte Array.
Per agafar en préstec aquest tipus de mètodes a través d'un objecte matriu, utilitzem un mètode call(), a continuació es mostra la matriu d'opcions escollides:
[].filter.call(sb.options, option => option.selected)
I per obtenir l'atribut text de qualsevol opció, podem encadenar el resultat d'un mètode filter() juntament amb un mètode map() com a continuació:
.map(option => option.text);
Per obtenir l'opció seleccionada utilitzant el bucle for
Podem utilitzar el bucle for per iterar per les opcions de llista seleccionades per determinar quina s'escull. Es podria descriure una funció per retornar la referència a una opció seleccionada o al valor. A continuació es fa referència a una opció seleccionada:
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;>