Mając drop-down na naszej stronie internetowej poprawia ogólną jakość i projekt na ekranie.
Rozwijane w ten sposób działa jako alternatywa i w szczególnych przypadkach, lepsza opcja, w porównaniu do przycisków radiowych i pól wyboru. Zaraz, co? Czy powiedzieliśmy, że jest to alternatywa zarówno dla przycisków radiowych, jak i pól wyboru? Ale, to powinien być tylko przycisk radiowy, czyż nie?
Przycisk radiowy nie pozwala na więcej niż jeden wybór, a pole wyboru, z drugiej strony, pozwala na jeden lub więcej niż jeden wybór. Użytkownik może wybrać tylko jedną opcję z listy rozwijanej i dlatego w swojej funkcjonalności przypomina ona tylko przycisk radiowy, a nie pole wyboru, prawda? Cóż, to właśnie tutaj pojawia się koncepcja wielokrotnego wyboru w polu wyboru.
Jak mogę pozwolić użytkownikowi na wybór wielu opcji z pola wyboru?
Z perspektywy projektanta stron internetowych, pozwolenie użytkownikowi na wybór wielu opcji z pola wyboru jest dość proste i nieskomplikowane. Musimy tylko dodać atrybut „multiple” do elementu <select>. Teraz, w celu wybrania wielu opcji, należy dodać atrybut size również do elementu select. To sprawi, że pole wyboru będzie wyglądało jak pudełko, a nie tylko rozwijana lista.
Użytkownik musi przytrzymać klawisz Ctrl (w Windows) i klawisz Command (na Macu), aby zaznaczyć wybory.
<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>Zauważ te punkty
-
Atrybut „multiple” jest atrybutem typu Boolean, który, gdy jest obecny, oznacza, że można wybrać wiele opcji.
-
Z punktu widzenia projektanta stron internetowych, kod HTML dla pojedynczego wyboru i wielokrotnego wyboru z listy rozwijanej różni się nieznacznie, jednak z punktu widzenia użytkownika końcowego, ta różnica nie jest widoczna na stronie internetowej. Pole wyboru nie zmieniłoby swojego układu ani stylizacji w żadnym z tych przypadków. Dlatego użytkownik musi być poinformowany, jak wybrać wiele opcji z pola wyboru.
-
Biorąc pod uwagę punkt wspomniany powyżej, lepszym wyborem jest wybranie pól wyboru zamiast wielokrotnego wyboru, jeśli liczba wyborów jest mniejsza.
-
Sposób wybierania wielu opcji z listy rozwijanej różni się w zależności od systemu operacyjnego. Podczas gdy przycisk Control (Ctrl) jest używany do zaznaczania w Windows, przycisk Command robi to w systemach Mac.
Jak widać, natywne pole wyboru HTML jest dość ograniczone, szczególnie w przypadku wybierania wielu opcji. To jest miejsce, gdzie JavaScript i wysoce efektywne biblioteki wchodzą do gry. Komponent jQuery select2 daje projektantowi możliwość dostosowania ogólnego układu pola wyboru wraz z włączeniem opcji wysokiej użyteczności, takich jak wyszukiwanie, dynamiczne ładowanie, tagowanie, między innymi.
Czy select2 obsługuje wielokrotny wybór?
Select2 obsługuje wielokrotny wybór w liście rozwijanej. Aby włączyć wielokrotny wybór, wystarczy dołączyć 'multiple’ jako atrybut.
Zaletą jest to, że użytkownik nie musi naciskać klawisza Ctrl lub Command aby wybrać wiele opcji.
<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 dodaje również inne ulepszenia. Na przykład, aby ograniczyć liczbę wyborów, których może dokonać użytkownik, wystarczy dodać maximumSelectionLength w opcjach Select2 w następujący sposób:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});Czytaj więcej o Select2 w dokumentacji
.