Vom înțelege cum să gestionăm < Selectați > opțiunea în JavaScript în acest tutorial.
HTML Selectați Opțiune
O opțiune ne facilitează lista de opțiuni. Ne permite să alegem o singură opțiune sau mai multe. Folosim elementele și pentru a forma o opțiune.
De exemplu:
Red Yellow Green Blue
Opțiunea ne permite să alegem câte o opțiune, care este menționată mai sus.
Dacă dorim mai multe selecții, putem include atributul la < multiplu > elementele de mai jos:
Descărcați videoclipuri de pe youtube vlc
Red Yellow Green Blue
Tipul HTMLSelectElement
Folosim tipul HTMLSelectElement pentru a interacționa cu opțiunea din JavaScript.
Tipul HTMLSelectElement conține următoarele atribute utile:
proprietatea selectIndex
Aplicam API-ul DOM ca querySelector() sau getElementById() .
Exemplul indică cum să obțineți indexul opțiunii selectate, care este menționat mai jos:
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); }; Cum functioneaza:
- Inițial, selectați componentele și cu ajutorul metodei querySelector().
- După aceea, legați ascultătorul evenimentului clic la acest buton și afișați indexul selectat cu ajutorul metodei alert() dacă butonul este apăsat.
proprietate de valoare
Proprietatea de valoare a elementului se bazează pe componenta și atributul multiplu al HTML-ului său:
- Proprietatea valoare a unei casete de selectare va fi un șir gol atunci când nu a fost selectată nicio opțiune.
- Proprietatea value a unei casete de selectare va fi valoarea opțiunii alese atunci când o opțiune a fost aleasă și conține atributul value.
- Proprietatea valoare a unei casete de selectare va fi textul opțiunii alese atunci când o opțiune a fost aleasă și nu conține niciun atribut de valoare.
- Proprietatea de valoare a unei casete de selectare va fi derivată din opțiunea selectată inițială cu privire la ultimele două reguli atunci când sunt alese mai multe opțiuni.
Luați în considerare exemplul de mai jos:
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); }; În acest exemplu de mai sus:
- Atributul value al elementului este gol atunci când selectăm opțiunea inițială.
- Atributul de valoare al unei casete de selectare va fi Ember.js, deoarece opțiunea aleasă nu conține niciun atribut de valoare atunci când alegem ultima opțiune.
- Atributul valoare va fi „1” sau „2” atunci când alegem a treia sau a doua opțiune.
Tipul HTMLOptionElement
Tipul HTMLOptionElement ilustrează elementul în JavaScript.
Acest tip conține următoarele proprietăți:
Index- Indicele opțiunii din grupul de opțiuni.
Selectat- Returnează o valoare adevărată dacă este aleasă opțiunea. Setăm proprietatea selectată adevărată pentru selectarea unei opțiuni.
Text- Acesta returnează textul opțiunii.
Valoare- Returnează atributul value al HTML.
Componenta conține un atribut de opțiune care ne permite să accesăm opțiunile de colectare:
selectBox.options
De exemplu, pentru a accesa valoarea și textul celei de-a doua opțiuni, folosim următoarele:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
Pentru a obține o opțiune selectată a componentei împreună cu o selecție individuală, folosim codul de mai jos:
let selectOption = selectBox.options [selectBox.selectedIndex];
După aceea, putem accesa valoarea și textul unei opțiuni selectate după proprietățile valorii și textului:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Când componenta permite mai multe selecții, putem folosi un atribut selectat pentru a determina ce opțiune este selectată:
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); }; În exemplu, sb.opțiune este obiectul asemănător matricei. Prin urmare, nu conține metoda filter() la fel ca obiectul Array.
Pentru a împrumuta aceste tipuri de metode printr-un obiect matrice, folosim o metodă call(), mai jos oferă matricea de opțiuni alese:
[].filter.call(sb.options, option => option.selected)
Și pentru a obține atributul text al oricărei opțiuni, putem lega rezultatul unei metode filter() împreună cu o metodă map() ca mai jos:
.map(option => option.text);
Pentru a obține opțiunea selectată folosind bucla for
Putem folosi bucla for pentru a repeta opțiunile din lista selectate pentru a determina care este aleasă. Ar putea fi descrisă o funcție pentru returnarea referinței la o opțiune selectată sau la valoarea. Mai jos oferă referință la o opțiune selectată:
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;>