JavaScript select Element | Mark's Trackside

sammanfattning: i den här handledningen lär du dig hur du hanterar <select> – elementet i JavaScript.

introduktion till HTML select elements

a<select> element ger dig en lista med alternativ. Det låter dig välja ett eller flera alternativ.

för att bilda ett<select> – element använder du elementet<select> och<option>., Till exempel:

ovanstående <select> – element låter dig välja ett enda alternativ åt gången.

om du vill ha flera val kan du lägga till multiple – attributet till <select> – elementet enligt följande:

HTMLSelectElement-typen

för att interagera med <select> – elementet i JavaScript använder du HTMLSelectElement typ.,

typenHTMLSelectElement har följande användbara egenskaper:

selectedIndex – returnerar det nollbaserade indexet för det valda alternativet. selectedIndexär-1 om inget alternativ är markerat. Om<select> – elementet tillåter flera val, returnerarselectedIndexvalue för det första alternativet.,
value – returnerar egenskapenvalue för det första valda alternativelementet om det finns en, annars returnerar den en tom sträng.
multiple – returnerartrueom<select> – elementet tillåter flera val. Det motsvarar attributet multiple.

egenskapen selectedIndex

för att välja ett<select> – element använder du DOM API somgetElementById() ellerquerySelector().,

följande exempel visar hur du får indexet för det valda alternativet:

hur det fungerar:

välj först<button> och<select> – elementen med hjälp avquerySelector() – metoden.
fäst sedan en klickhändelselyssnare på knappen och visa det valda indexet med alert() – metoden när knappen klickas.,

egenskapen värde

egenskapenvalue för elementet<select> beror på elementet<option> och dess HTMLmultiple attribut:

Om inget alternativ är markerat beror<option> och dess HTML multiple attribut:
- Om inget alternativ är markerat = ”9be11c9f6f” >

egenskapen för Välj rutan är en tom sträng.

om ett alternativ är markerat och har egenskapenvalueär värdet för det valda alternativet.,

om ett alternativ är markerat och inte har någonvalue – attributet är egenskapenvalue I rutan välj texten till det valda alternativet.

om flera alternativ har valts kommer egenskapenvalue I rutan välj att härledas från det första valda alternativet baserat på de två tidigare reglerna.

se följande exempel:

i det här exemplet:

Om du väljer det första alternativet är egenskapenvalue för egenskapen<select> tom.,
Om du väljer det sista alternativet är egenskapenvalue I rutan väljEmber.js eftersom det valda alternativet inte har attributetvalue.
Om du väljer det andra eller tredje alternativet kommer egenskapen värde att vara "1"eller "2".

Htmloptionelementtypen

i JavaScript representerarHTMLOptionElement typen<option> elementet.,

HTMLOptionElement – typen har följande praktiska egenskaper:

index – indexet för alternativet inuti samlingen av alternativ.
selected – returnerartrue när alternativet är markerat. Du anger den här egenskapen tilltrue för att välja ett alternativ.
text – returnerar alternativets text.
value – returnerar attributet HTML-värde.,text och valueför det valda alternativet via textoch valueegenskaper:
```
Code language: JavaScript (javascript)
```
om entext och valueegenskaper:
```
Code language: JavaScript (javascript)
```
om en<select>-elementet tillåter flera val, du kan använda egenskapenselected för att bestämma vilka alternativ som är markerade:

i det här exemplet är sb.options ett array-liknande objekt så att det inte har metoderna filter() som en sb.options id = ”da0c97a719” >

objekt.,

för att låna dessa metoder frånArray – objektet använder ducall() – metoden. Till exempel returnerar följande en rad valda alternativ:


Code language: PHP (php)

och för att få egenskapen text för alternativen kedjar du resultatet av metoden filter() med metoden map(), så här:


Code language: JavaScript (javascript)

sammanfattning

elementet <select> låter dig välja ett eller flera alternativ., Lägg tillmultiple – attributet till<select> – elementet för att aktivera flera val.
HTMLSelectElement representerar elementet<select>. AnvändselectedIndex ochvalue för att få index och värde för det valda alternativet.
HTMLOptionElement representerar<option> – elementet. Om alternativet är markerat är egenskapen selected sann., EgenskapernaselectedText ochselectedValue returnerar egenskapernatext ochvalue för det valda alternativet.

var den här handledningen till hjälp ?
YesNo

JavaScript select Element (Svenska)