Vi kommer att förstå hur man hanterar < Välj > alternativet in JavaScript i denna handledning.
HTML Välj Alternativ
Ett alternativ underlättar oss alternativlistan. Det tillåter oss att välja ett eller flera alternativ. Vi använder elementen och för att skapa ett alternativ.
Till exempel:
Red Yellow Green Blue
Alternativet tillåter oss att välja ett alternativ i taget som nämns ovan.
Om vi önskar mer än ett urval kan vi inkludera attribut till < flera olika > element nedan:
java hej världen exempel
Red Yellow Green Blue
HTMLSelectElement-typ
Vi använder HTMLSelectElement-typen för att interagera med option i JavaScript.
HTMLSelectElement-typen innehåller följande användbara attribut:
egenskapen selectIndex
Vi tillämpar DOM API som querySelector() eller getElementById() .
Exemplet visar hur man får det valda alternativindexet som nämns nedan:
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); }; Hur det fungerar:
- Välj först komponenterna och med hjälp av metoden querySelector().
- Därefter länkar du klickhändelselyssnaren till den här knappen och visar det valda indexet med hjälp av alert()-metoden om knappen trycks ned.
värde fastighet
Elementets värdeegenskap förlitar sig på komponenten och multipla attributet i dess HTML :
- Egenskapen value för en selectbox kommer att vara en tom sträng när inget alternativ har valts.
- Egenskapen value för en selectbox kommer att vara värdet för det valda alternativet när ett alternativ har valts och innehåller värdeattributet.
- Egenskapen value för en markeringsruta kommer att vara texten för det valda alternativet när ett alternativ har valts och inte innehåller något värdeattribut.
- Egenskapen value för en urvalsruta kommer att härledas från det initialt valda alternativet för de två senaste reglerna när mer än ett alternativ har valts.
Tänk på exemplet nedan:
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); }; I exemplet ovan:
- Elementets värdeattribut är tomt när vi väljer det initiala alternativet.
- Värdeattributet för en select box kommer att vara Ember.js på grund av att det valda alternativet inte innehåller något värdeattribut när vi väljer det sista alternativet.
- Värdeattributet kommer att vara '1' eller '2' när vi väljer det tredje eller andra alternativet.
HTMLOptionElement-typ
HTMLOptionElement-typen illustrerar elementet i JavaScript.
Denna typ innehåller följande egenskaper:
Index- Alternativets index inom gruppen av alternativ.
Vald- Det returnerar ett sant värde om alternativet väljs. Vi anger den valda egenskapen sann för att välja ett alternativ.
Text- Det returnerar texten för alternativet.
Värde- Det returnerar värdeattributet för HTML.
Komponenten innehåller ett alternativattribut som tillåter oss att komma åt insamlingsalternativen:
selectBox.options
Till exempel, för att komma åt värdet och texten för det andra alternativet, använder vi nedan:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
För att få ett valt alternativ av komponenten tillsammans med ett individuellt val använder vi koden nedan:
let selectOption = selectBox.options [selectBox.selectedIndex];
Efter det kan vi komma åt värdet och texten för ett valt alternativ genom värde och textegenskaper:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
När komponenten tillåter mer än ett val kan vi använda ett valt attribut för att avgöra vilket alternativ som är valt:
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); }; I exemplet är sb.option är det arrayliknande objektet. Därför innehåller den inte samma metod filter() som Array-objektet.
För att låna dessa typer av metoder genom ett array-objekt använder vi en call()-metod, nedan ger arrayen av valda alternativ:
[].filter.call(sb.options, option => option.selected)
Och för att få textattributet för valfritt alternativ kan vi kedja ut resultatet av en filter()-metod tillsammans med en map()-metod som nedan:
.map(option => option.text);
För att få valt alternativ med för loop
VI kan använda for-slingan för att iterera efter de valda listalternativen för att avgöra vilken som är vald. En funktion kan beskrivas för att returnera referensen till ett valt alternativ eller värdet. Nedanstående hänvisar till ett valt alternativ:
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;>