Pudotusvalikoiden käyttäminen verkkosivuillamme parantaa ruudun kokonaislaatua ja -suunnittelua.
Pudotusvalikko toimii siten vaihtoehtona ja tietyissä tapauksissa parempana vaihtoehtona kuin valintapainikkeet ja valintaruudut. Hetkinen, mitä? Sanoimmeko vaihtoehto sekä valintapainikkeille että valintaruuduille? Mutta, sen olisi pitänyt olla vain valintapainike, eikö niin?
Valintapainike ei salli kuin yhden valinnan ja valintaruutu sen sijaan sallii yhden tai useamman valinnan. Käyttäjä voi valita pudotusvalikosta vain yhden vaihtoehdon ja siksi se muistuttaa toiminnaltaan vain radiopainiketta eikä valintaruutuja, eikö? No, tässä kohtaa valintalaatikon useiden valintojen käsite astuu kuvaan.
Miten voin sallia käyttäjien valita useita vaihtoehtoja valintalaatikosta?
Websuunnittelijan näkökulmasta käyttäjän salliminen valita useita vaihtoehtoja valintalaatikosta on melko yksinkertaista ja suoraviivaista. Meidän tarvitsee vain lisätä <select>-elementtiin attribuutti ”multiple”. Jotta voit valita useita vaihtoehtoja, sinun on lisättävä size-attribuutti myös select-elementtiin. Tämä saa valintalaatikon näyttämään laatikolta pelkän pudotusvalikon sijaan.
Käyttäjän on pidettävä Ctrl-näppäintä (Windowsissa) ja Command-näppäintä (Macissa) alhaalla valitakseen vaihtoehdot.
<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>Huomaa nämä kohdat
-
Ammattribuutti ”multiple” on Boolean-attribuutti, joka läsnä ollessaan merkitsee sitä, että vaihtoehtoja voi olla valittavana useita.
-
Verkkosuunnittelijan näkökulmasta HTML-koodi yksittäisiä valintoja ja useita valintoja pudotusvalikosta varten eroaa kuitenkin hieman; loppukäyttäjän näkökulmasta tämä ero ei näy verkkosivulla. Valintaruutu ei muuttaisi ulkoasua tai muotoilua kummassakaan tapauksessa. Siksi käyttäjälle on kerrottava, miten laatikosta valitaan useita vaihtoehtoja.
-
Edellä mainitun seikan vuoksi on parempi valita valintaruutuja kuin useita valintoja, jos vaihtoehtoja on vähemmän.
-
Tapa, jolla useita vaihtoehtoja valitaan pudotusvalikosta, vaihtelee käyttöjärjestelmittäin. Kun Windowsissa valintoihin käytetään ohjauspainiketta (Ctrl), Mac-järjestelmissä temppu hoituu komentopainikkeella.
Pudotusvalikon parantaminen
Kuten huomaat, HTML:n natiivi valintalaatikko on varsin rajallinen erityisesti useiden vaihtoehtojen valinnassa. Tässä kohtaa JavaScript ja erittäin tehokkaat kirjastot astuvat kuvioihin. Select2 jQuery-komponentti antaa suunnittelijalle vallan muokata valintalaatikon yleistä ulkoasua sekä sisällyttää siihen korkeat hyötyominaisuudet, kuten haku, dynaaminen lataus, merkintä ja muut.
Tukeeko select2 useita valintoja?
Select2 tukee useita valintoja pudotusvalikossa. Jos haluat ottaa käyttöön useita valintoja, sinun tarvitsee vain sisällyttää attribuutiksi ’multiple’.
Tässä on se etu, että käyttäjän ei tarvitse painaa Ctrl- tai Command-näppäintä valitakseen useita vaihtoehtoja.
<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 lisää myös muita parannuksia. Jos haluat esimerkiksi rajoittaa käyttäjän tekemien valintojen määrää, lisää vain MaximumSelectionLength Select2-asetuksiin näin:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});Lue lisää Select2:sta dokumentaatiosta
.