JavaScript select Element | Mark's Trackside

shrnutí: v tomto tutoriálu se naučíte, jak zacházet s prvkem<select> v JavaScriptu.

Úvod do elementů HTML select

a<select> element vám poskytne seznam možností. To vám umožní vybrat jednu nebo více možností.

tvořit <select> prvek, můžete použít <select> <option> prvky., Například:

výše uvedený<select> prvek umožňuje vybrat jednu možnost najednou.

Pokud chcete více tipů, můžete přidat multiple atribut <select> prvek takto:

komunikovat s <select> element v Javascriptu, můžete použít HTMLSelectElement typu.,

HTMLSelectElement typ má následující užitečné vlastnosti:

selectedIndex – vrátí z nuly vycházející index vybrané možnosti. selectedIndex je -1 pokud není vybrána žádná volba. Pokud <select> prvek umožňuje více výběrů, selectedIndex vrátí value první možnost.,
value – vrací value vlastnost první vybraná možnost prvku, pokud existuje, jinak vrací prázdný řetězec.
multiple – vracítrue pokud prvek<select> umožňuje více výběrů. Je ekvivalentní atributu multiple.

vyberte <select> prvek, můžete použít DOM API, jako je getElementById() nebo querySelector().,

následující příklad ukazuje, jak získat index vybrané možnosti:

Jak to funguje:

První, vyberte <button> <select> prvky pomocí querySelector() metoda.
poté připojte k tlačítku posluchače událostí kliknutí a zobrazte vybraný index pomocí metody alert() po kliknutí na tlačítko.,

value vlastnost <select> elementu závisí na <option> prvek a jeho HTML multiple atribut:

Pokud není volba zatržena, value vlastnost select box je prázdný řetězec.
Pokud je vybrána možnost a má value atribut value vlastnost vyberte pole, je hodnota zvolené možnosti.,
Pokud je vybrána možnost a nemá žádné value atribut value vlastnost vyberte pole je text vybrané možnosti.
pokud je vybráno více možností, je vlastnostvalue pole select odvozena od první vybrané volby na základě předchozích dvou pravidel.

Viz následující příklad:

V tomto příkladu:

Pokud zvolíte první možnost, value vlastnost <select> je prázdný.,
Pokud zvolíte poslední možnost, value vlastnost vyberte pole je Ember.js protože vybraná volba nemá žádný value atribut.
Pokud zvolíte druhou nebo třetí možnost, vlastnost hodnota bude "1"nebo "2".

V Javascriptu, HTMLOptionElement typ představuje <option> elementu.,

HTMLOptionElement typ má následující užitečné vlastnosti:

index – index možnost uvnitř sbírka možnosti.
selected – vrací true je-li vybrána možnost. Tuto vlastnost nastavíte na true pro výběr možnosti.
– vrátí text volby.
value – vrací atribut HTML value.,08″>

Pak můžete přistupovat text value vybrané možnosti pomocí text value vlastnosti:


Code language: JavaScript (javascript)

Pokud <select> prvek umožňuje více výběrů, můžete použít selected vlastnost k určení, které jsou vybrány možnosti:

V tomto příkladu, sb.options je pole jako objekt, takže to není filter() metody jako Array objekt.,

Chcete-li si tyto metody půjčit z objektuArray, použijte metoducall(). Například následující vrací pole vybraných možností:


Code language: PHP (php)

A text vlastnost možnosti, řetěz výsledek filter() metoda map() metoda, jako je tento:


Code language: JavaScript (javascript)

<select> prvek umožňuje vybrat jednu nebo více možností., Přidejte atribut multiple k prvku <select> a povolte více výběrů.
HTMLSelectElement představuje<select> prvek. Pomocí selectedIndex a value získáte index a hodnotu vybrané volby.
HTMLOptionElement představuje prvek<option>. Je-li volba vybrána, je vlastnost selected pravdivá., selectedText selectedValue vlastnosti vrátit text value vybrané možnosti.