Rozbalovací nabídka <select>

Značka <select> se běžně používá ve formulářích pro roletový výběr více položek. Jednotlivé položky se zapisují do nepovinně párových značek <option>.

Použít:

Rozbalení <select>u

Rozbalovací seznamy bývají na stránkách podle mého názoru často zneužívány. Myslím tím situaci, kdy má rozbalovací výběr jen pár položek, ale je kvůli jejich odkrytí nutno nejprve kliknout. V takovém případě mi přijde vhodnější použít pár radio přepínačů (<input type=radio>).

Kromě horší použitelnosti se značka <select> i hůře styluje.

Rozbalení po najetí myší

Trochu pomoci si teoreticky lze JavaScriptem a provést rozbalení po najetí myši. (Využívá se nastavení atributu size podle počtu vnořených položek spolu s absolutním posicováním.)

Použít:

Otázka je, jestli je to skutečně pomoc — narušení výchozího chování může být matoucí.

Získání vybrané položky JavaScriptem

Možný důvod, proč tvůrci webů upřednostňují roletový výběr, je jeho snadné zpracovávání JavaScriptem. Získání vybrané volby je otázkou jednoduchého:

document.getElementById('jmenoSelectu').value

Případně:

document.formular.jmenoSelectu.value

U <input type=radio> je nutné projít cyklem všechny dané <input>y a hlídat u nich vlastnost checked (či použít nástroj typu jQuery — $('input[name=jmeno]:checked').val()).

Vybraný element

Někdy je potřeba vybrat ze <select>u celý vybraný element <option>, to jde pomocí vlastnosti selectedIndex:

function vybranyOption(select) {
  // první element „– vybrat –“ se bere jako nic
  if (select.selectedIndex == 0) return false;
  // vrátí se vybraný element
  return select.options[select.selectedIndex];
}

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Tag <label> a atribut for

Značka <label> a atribut for

Značka <label> slouží ke svázání popisku s formulářovým prvkem. Kdy použít atribut for?

Reset políčka pro nahrávání souboru

Resetování <input type=file>

Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.

Napodívání přes <datalist>

Našeptávání značkou <datalist>

Pro napovídání možností při vyplňování <input>u lze v HTML 5 použít značku <datalist>.

Input

HTML značka <input>

Všechny varianty značky <input>, možné atributy, vysvětlení a ukázky.

HTML tlačítko <button>

Značka <button>

Tlačítko <button> v HTML, možné problémy v Internet Exploreru a jak je vyřešit.

Komentáře