Avere drop down nella nostra pagina web migliora la qualità complessiva e il design sullo schermo.
Un drop-down funziona quindi come un’alternativa e in casi specifici, un’opzione migliore, rispetto ai pulsanti radio e alle checkbox. Aspetta, cosa? Abbiamo detto un’alternativa sia ai pulsanti radio che alle caselle di controllo? Ma avrebbe dovuto essere solo il pulsante radio, no?
Un pulsante radio non permette più di una selezione e una casella di controllo, invece, permette una o più selezioni. Un utente può selezionare solo un’opzione da un elenco a discesa e quindi assomiglia solo al pulsante di opzione nella sua funzionalità e non alle caselle di controllo, giusto? Bene, è qui che entra in gioco il concetto di selezioni multiple in una select box.
Come posso permettere agli utenti di selezionare più opzioni da una select box?
Dalla prospettiva di un web designer, permettere all’utente di scegliere più opzioni da una select box è abbastanza semplice e diretto. Abbiamo solo bisogno di aggiungere l’attributo “multiple” all’elemento <select>. Ora, per selezionare più opzioni, bisogna aggiungere un attributo “size” anche all’elemento select. Questo farà apparire la select box come una scatola piuttosto che come un semplice drop-down.
L’utente deve tenere premuto il tasto Ctrl (in Windows) e il tasto Command (su Mac) per selezionare le scelte.
<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>Nota questi punti
-
L’attributo “multiple” è un attributo booleano che quando presente, significa che possono essere scelte più opzioni.
-
Dal punto di vista di un web designer, il codice HTML per le selezioni singole e multiple da un menu a tendina differisce un po’, tuttavia; dal punto di vista dell’utente finale, questa differenza non è visibile sulla pagina web. La casella di selezione non cambierebbe il suo layout o il suo stile in entrambi i casi. Pertanto, all’utente deve essere detto come selezionare più opzioni dalla casella.
-
Dato il punto menzionato sopra, è una scelta migliore scegliere le caselle di controllo rispetto alle selezioni multiple se il numero di scelte è inferiore.
-
Il modo di selezionare più opzioni da un menu a tendina differisce da un sistema operativo all’altro. Mentre il pulsante di controllo (Ctrl) è usato per le selezioni in Windows, il pulsante di comando fa il trucco nei sistemi Mac.
Migliorare il Dropdown
Come potete vedere, la select box HTML nativa è abbastanza limitata specialmente per scegliere opzioni multiple. È qui che JavaScript e le librerie altamente efficaci entrano nella mischia. Il componente jQuery select2 dà al designer il potere di personalizzare il layout generale della select box insieme all’incorporazione di opzioni di alta utilità come la ricerca, il caricamento dinamico, il tagging, tra gli altri.
Select2 supporta selezioni multiple?
Select2 supporta selezioni multiple nell’elenco a discesa. Per abilitare le selezioni multiple, basta includere ‘multiple’ come attributo.
Il vantaggio qui è che l’utente non deve premere il tasto Ctrl o Command per selezionare più opzioni.
<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 aggiunge anche altri miglioramenti. Per esempio, per limitare il numero di scelte che l’utente può fare, basta aggiungere maximumSelectionLength nelle opzioni di Select2 come questo:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});Leggi di più su Select2 nella documentazione