Další hrátky s formulářovým polem SELECT

V předchozích článcích na toto téma jsme si ukázali několik způsobů, jak v HTML stránce využít rozbalovacího seznamu neboli pole SELECT. Dnes si ukážeme hrst jednoduchých skriptů, které se nám budou hodit v případě pole SELECT s atributem „multiple“, tedy seznamu, v němž můžeme vybrat najednou více položek než jednu.

Základní informací, která je užitečná zejména v případě delších seznamů, je vypsání počtu položek, které jsou v SELECT seznamu označeny. Následující formulář tuto informaci poskytuje – zkuste označit více druhů ovoce v příslušném seznamu (pro úplné začátečníky – více položek označíte – ve Windows – přidržením klávesy Ctrl při klikání myší):

HTML kód předchozího formuláře (bez čtveřice odkazů) vypadá takto (všimněte si, že druhá a pátá položka jsou označeny již „z výroby“):

Změnu hodnoty v poli „Označeno“ – formulářové pole s názvem sc – zajišťuje funkce SelectCount, volaná z handleru události onChange dotyčného seznamu, tedy při každé změně označení položek v seznamu. Kód této krátké JavaScriptové funkce vypadá následovně:

K uvedené funkci není myslím potřeba žádné vysvětlení, zbývá dodat, že za definicí HTML formuláře je záhodno zavolat funkci SelectCount poprvé, to proto, aby se do pole „Označeno“ dostal počet položek, které jsou označeny již při otevření stránky (handler události onChange není při této příležitosti volán):

Další obslužné funkce seznamu SELECT jsou volány ze čtyř odkazů, vypsaných pod polem „Označeno“ ve výše uvedeném formuláři, a slouží k obsluze označení jednotlivých položek seznamu. Pokud jste si je dosud nevyzkoušeli, učiňte tak nyní – význam jednotlivých odkazů je zřejmý z popisného textu.

První dva odkazy – „Označit vše“ a „Zrušit označení“ volají tutéž funkci, jen s různými parametry. Je-li hodnota parametru value v následující funkci rovna true, dochází k označení všech položek pole SELECT, v opačné případě ke zrušení jejich značení. Kód funkce, pojmenované SelectAll je opět velice jednoduchý:

Poznámka: U této, jakož i u dalších dvou uvedených funkcí, voláme na závěr funkci SelectCount – je to opět proto, abychom zajistili správné zobrazení počtu označených položek do pole „Označeno“ – v případě změny označení pomocí skriptu také není aktivován handler události onChange.

Ani na další funkci, mající za úkol obrátit (invertovat) označení v poli SELECT, není nic složitého (funkci lze rovněž, rozšířením parametru value, elegantně spojit s funkcí předchozí):

A do třetice, totéž v bleděmodrém: funkce SelectDefault vrací označení tak, jak bylo v okamžiku natažení stránky. Využíváme zde užitečné vlastnosti defaultSelected objektu Option:

Na závěr zbývá jen uvést, jak jsou v uvedeném příkladu tyto funkce volány z HTML kódu odkazů (hyperlinků):

To je pro tentokrát vše, přeji vám příjemný den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.