Slabikář JavaScriptu – ovládání prvku SELECT
Ovládací prvek SELECT se používá na formulářích pro výběr jedné nebo více položek seznamu. Každý prvek SELECT obsahuje vlastnosti a metody používané skriptem a navíc kolekci položek, které seznam obsahuje. Podívejme se na ně podrobně.
Vlastnosti prvku SELECT
Vlastnostmi tohoto ovládacího prvku jsou kromě obecných vlastností jako id, className, kolekce style atp.:
type – aktuální typ prvku select. Hodnoty vlastnosti jsou „select-one“ nebo „select-multiple“ v závislosti na hodnotě vlastnosti multiple (viz dále) a tím i na možnosti vybrat (prosvítit) pouze jeden nebo více položek seznamu. Vlastnost je pouze pro čtení
selectedIndex – pořadové číslo prvku kolekce OPTIONS (viz dále), který je aktuálně vybrán. Pokud není zvolen žádný prvek, je hodnota selectedIndex rovna -1. Pokud je typ prvku select-multiple, obsahuje selectedIndex pořadové číslo první vybrané položky. Indexování položek začíná od 0. Vlastnosti lze hodnotu přiřadit skriptem, což způsobí vizuální prosvícení této položky.
value – hodnota vlastnosti value vybraného prvku kolekce OPTIONS. Změnou hodnoty této vlastnosti na existující hodnotu value lze také docílit výběru konkrétního prvku. Odpovídajícím způsobem se tím změní i hodnota vlastnosti selectedIndex.
length – počet prvků v kolekci OPTIONS
form – vlastnost vrací odkaz na formulář (tedy objekt), v němž je prvek SELECT obsažen. Pokud není ovládací prvek umístěn do formuláře, vrací hodnotu null. Vlastnost je pouze pro čtení.
disabled – hodnota typu boolean znepřístupňuje (true) a zpřístupňuje (false) ovládací prvek
multiple – hodnota typu boolean mění typ ovládacího prvku. Hodnota true umožňuje vybrat více než jednu položku seznamu, hodnota false pouze jednu.
name – název ovládacího prvku
size – počet viditelných řádků seznamu s položkami
tabIndex – číslo udávající pořadí prvku v tzv. tab order, tedy v pořadí, v jakém získávají prvky focus, když mezi nimi uživatel prochází pomocí klávesy TAB, (respektive v obráceném pořadí kombinací kláves SHIFT+TAB). Do tab order jsou zařazeny všechny ovládací prvky, které podporují vlastnost tabIndex, které je přiřazena kladná hodnota. Prvky mající stejnou hodnotu tabIndex získávají focus v pořadí, v jakém byly natahovány do prohlížeče. Ostatní prvky jsou zařazeny na konec tab orderu v pořadí, v jakém byly natahovány do stránky. Prvky s vlastností disabled nastavenou na true jsou z tab order vyloučeny.
Metody
add – metoda přidá položku do kolekce OPTIONS na určené místo. Metoda má dva objektové argumenty. Prvním je přidávaný objekt do kolekce, druhým odkaz na existující objekt v kolekci, před který se má přidáváná položka zařadit. Pokud má být nová položka v kolekci poslední, musí mít druhý parametr metody hodnotu null.
Příklad přidání položky „omega“ na konec seznamu a „alfa“ na jeho začátek:
|
Aby to však nebylo tak jednoduché, tento způsob, definovaný standardem DOM – nebude fungovat v MSIE. Ten vyžaduje jiné sémantické chápání druhého parametru metody add. Pro MSIE musí být druhý parametr číselný. Jeho význam je index v kolekci OPTION, který má mít nově přidávaná položka. Aby výše uvedený příklad fungoval i v MSIE, je zapotřebí jej přizpůsobit třeba takto:
|
Pro definování objektové hodnoty parametru arg2 je zapotřebí, aby měl seznam alespoň jednu položku v kolekci OPTIONS, což v našem případě nemá. Proto je nuntné tento problém obejit přiřazením nikoli objektové ale řetězcové hodnoty do této proměnné a následným použitím metody eval.
remove – metoda odstraní položku z kolekce OPTIONS. Číselným parametrem metody je pořadové číslo položky (index), která se má odstranit, v kolekci. Pokud index neexistuje, metoda neprovede žádnou akci. Metoda remove funguje již naštěstí stejně ve všech prohlížečích.
blur – odebere focus (zaměření) z ovládacího prvku
focus – přenese zaměření (focus) na ovládací prvek
V uvedeném příkladu jsme se již dotkli kolekce OPTIONS obsahující položky seznamu. U každé položky lze použít následující vlastnosti:
form – stejně jako u ovládacího prvku SELECT vlastnost vrací odkaz na formulář (tedy objekt), v němž je prvek obsažen. Pokud není ovládací prvek umístěn do formuláře, vrací hodnotu null. Vlastnost je pouze pro čtení.
defaultSelected – obsahuje původní hodnotu atributu selected pro danou položku
text – textová část položky. Ačkoli specifikace DOM uvádí, že vlastnost je pouze pro čtení, prohlížeče umožňují tuto hodnotu měnit.
index – pořadové číslo položky v kolekci.
disabled – hodnota boolean. Pokud je true, prvek je sice viditelný v seznamu, ale je šedý a tudíž jej nelze zvolit. Nastavení této vlastnosti nefunguje v MSIE
selected – vlastnost vrací true, pokud je prvek aktuálně vybrán. Ačkoli specifikace DOM uvádí, že vlastnost je pouze pro čtení, prohlížeče umožňují tuto hodnotu měnit a vybírat tak položky ze seznamů obou typů: „select-one“ i „select-multiple“.
value – hodnota atributu value položky
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Zabezpečení e-mailů: Jak můžete chránit vaši firemní komunikaci
13. prosince 2023 -
Jak se chránit před podvody na internetu – část 2
14. října 2024
Nejnovější
-
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024 -
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024