Având drop-down-uri pe pagina noastră web îmbunătățește calitatea generală și designul pe ecran.
Un drop-down funcționează astfel ca o alternativă și, în anumite cazuri, o opțiune mai bună, în comparație cu butoanele radio și casetele de selectare. Așteptați, ce? Am spus o alternativă atât la butoanele radio, cât și la casetele de selectare? Dar, ar fi trebuit să fie doar butonul radio, nu-i așa?
Un buton radio nu permite mai mult de o selecție, iar o casetă de selectare, pe de altă parte, permite una sau mai multe selecții. Un utilizator poate selecta o singură opțiune dintr-o listă derulantă și, prin urmare, seamănă doar cu butonul radio în funcționalitatea sa și nu cu casetele de selectare, nu? Ei bine, aici intervine conceptul de selecții multiple într-o casetă de selectare.
Cum pot permite utilizatorilor să selecteze mai multe opțiuni dintr-o casetă de selectare?
Din punctul de vedere al unui designer web, a permite utilizatorului să aleagă mai multe opțiuni dintr-o casetă de selectare este destul de simplu și direct. Trebuie doar să adăugăm atributul „multiple” la elementul <select>. Acum, pentru a selecta mai multe opțiuni, trebuie să adăugați un atribut „size” și la elementul select. Acest lucru va face ca caseta de selectare să arate ca o cutie și nu doar ca o listă derulantă.
Utilizatorul trebuie să țină apăsată tasta Ctrl (în Windows) și tasta Command (pe Mac) pentru a selecta opțiunile.
<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>Rețineți aceste puncte
-
Atributul „multiple” este un atribut boolean care, atunci când este prezent, semnifică faptul că pot fi alese mai multe opțiuni.
-
Din punctul de vedere al unui proiectant web, codul HTML pentru selecții unice și selecții multiple dintr-o listă derulantă diferă puțin, totuși; din perspectiva utilizatorului final, această diferență nu este vizibilă pe pagina web. Caseta de selectare nu și-ar schimba aspectul sau stilul în ambele cazuri. Prin urmare, utilizatorului trebuie să i se spună cum să selecteze mai multe opțiuni din căsuță.
-
Datorită punctului menționat mai sus, este o alegere mai bună să se aleagă căsuțele de selectare decât selecțiile multiple dacă numărul de opțiuni este mai mic.
-
Modalitatea de a selecta mai multe opțiuni dintr-o listă derulantă diferă de la un sistem de operare la altul. În timp ce butonul de control (Ctrl) este folosit pentru selecții în Windows, butonul de comandă face treaba în sistemele Mac.
Îmbunătățirea căsuței derulante
După cum puteți vedea, căsuța de selectare HTML nativă este destul de limitată mai ales pentru alegerea mai multor opțiuni. Aici intră în joc JavaScript și bibliotecile foarte eficiente. Componenta jQuery select2 oferă designerului puterea de a personaliza aspectul general al casetei de selectare împreună cu încorporarea unor opțiuni de mare utilitate, cum ar fi căutarea, încărcarea dinamică, etichetarea, printre altele.
Select2 suportă selecții multiple?
Select2 suportă selecții multiple în lista derulantă. Pentru a activa selecțiile multiple, este suficient să includeți ‘multiple’ ca atribut.
Avantajul aici este că utilizatorul nu trebuie să apese tasta Ctrl sau Command pentru a selecta mai multe opțiuni.
<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 adaugă și alte îmbunătățiri. De exemplu, pentru a limita numărul de alegeri pe care le poate face utilizatorul, este suficient să adăugați maximumSelectionLength în opțiunile Select2 astfel:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});Citește mai multe despre Select2 în documentație
.