Mít na webové stránce rozevírací seznamy zvyšuje celkovou kvalitu a design na obrazovce.
Rozvírací seznam tak funguje jako alternativa a v určitých případech jako lepší možnost ve srovnání s rádiovými tlačítky a zaškrtávacími políčky. Počkat, cože? Řekli jsme alternativu k rádiovým tlačítkům i zaškrtávacím políčkům? Ale vždyť to mělo být jen rádiové tlačítko, ne?“
Radiové tlačítko neumožňuje více než jeden výběr a zaškrtávací políčko naopak umožňuje jeden nebo více než jeden výběr. Uživatel může z rozevíracího seznamu vybrat pouze jednu možnost, a proto se svou funkčností podobá právě rádiovému tlačítku a ne zaškrtávacím políčkům, je to tak? No, a právě zde přichází na řadu koncept vícenásobných výběrů v poli výběru.
Jak mohu uživatelům umožnit výběr více možností z pole výběru?
Z pohledu webdesignéra je umožnění uživateli vybrat více možností z pole výběru poměrně jednoduché a přímočaré. Stačí, když do prvku <select> přidáme atribut „multiple“. Nyní, aby bylo možné vybrat více možností, je třeba do prvku select přidat také atribut size. Díky tomu bude pole select vypadat spíše jako box než jen jako rozevírací seznam.
Uživatel musí pro výběr možností podržet klávesu Ctrl (v systému Windows) a klávesu Command (v systému Mac).
<select name="Country" multiple size="5"> <option value="USA">USA</option> <option value="Russia">Russia</option> <option value="India">India</option> <option value="Britain">Britain</option></select>Všimněte si těchto bodů
-
Atribut „multiple“ je logický atribut, který, pokud je přítomen, znamená, že lze vybrat více možností.
-
Z pohledu webdesignéra se kód HTML pro jednoduchý výběr a vícenásobný výběr z rozbalovacího seznamu trochu liší, z pohledu koncového uživatele však tento rozdíl není na webové stránce vidět. Výběrové pole by v obou případech nezměnilo své rozvržení ani styl. Proto je třeba uživateli sdělit, jak má vybrat více možností z pole.
-
Vzhledem k výše uvedenému bodu je lepší zvolit zaškrtávací políčka než vícenásobné výběry, pokud je počet možností menší.
-
Způsob výběru více možností z rozbalovacího seznamu se v jednotlivých operačních systémech liší. Zatímco v systému Windows se pro výběr používá ovládací tlačítko (Ctrl), v systémech Mac to dělá příkazové tlačítko.
Vylepšení rozbalovacího seznamu
Jak vidíte, nativní výběrové pole HTML je poměrně omezené zejména pro výběr více možností. Zde přichází na řadu JavaScript a velmi účinné knihovny. Komponenta jQuery select2 dává návrháři možnost přizpůsobit celkové rozvržení výběrového pole spolu se začleněním vysoce užitečných možností, jako je mimo jiné vyhledávání, dynamické načítání, označování.
Podporuje select2 více výběrů?
Select2 podporuje více výběrů v rozevíracím seznamu. Chcete-li povolit vícenásobné výběry, stačí jako atribut uvést ‚multiple‘.
Výhodou je, že uživatel nemusí pro výběr více možností stisknout klávesu Ctrl nebo Command.
<script>$(function(){ $(".js-example-basic-multiple").select2();});</script><select class="js-example-basic-multiple" multiple="multiple"> <option value="US">United States</option> <option value="IND">India</option> <option value="GBR">Great Britain</option></select>Select2 přidává i další vylepšení. Chcete-li například omezit počet voleb, které může uživatel provést, stačí v možnostech Select2 přidat maximumSelectionLength takto:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});Přečtěte si více o Select2 v dokumentaci
.