Slabikář JavaScriptu – ovládání prvku SELECT

17. července 2002

•

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:

<form name=“formular“>
<select name=“seznam“>
</select>
</form>
<script language=“JavaScript“>
var no = new Option();
no.value = 10
no.text = „omega“
document.formular.seznam.add(no,null)
no = new Option();
no.value = 11
no.text = „alfa“
document.formular.seznam.add(no,document.formular.seznam.options[0])
</script>

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