Ativar drop-down na nossa página web melhora a qualidade geral e o design no ecrã.
A drop-down funciona assim como uma alternativa e, em casos específicos, uma opção melhor, em comparação com botões de rádio e caixas de seleção. Espere, o quê? Dissemos uma alternativa aos botões de rádio e caixas de seleção? Mas, deveria ter sido apenas o botão do rádio, não deveria?
Um botão de rádio não permite mais de uma seleção e uma caixa de seleção, por outro lado, permite uma ou mais de uma seleção. Um usuário pode selecionar apenas uma opção de uma lista suspensa e, portanto, assemelha-se apenas ao botão de rádio em sua funcionalidade e não às caixas de seleção, certo? Bem, é aqui que entra em jogo o conceito de múltiplas selecções numa caixa de selecção.
Como posso permitir aos utilizadores seleccionar múltiplas opções de uma caixa de selecção?
Da perspectiva de um web designer, permitindo ao utilizador escolher múltiplas opções de uma caixa de selecção é bastante simples e directo. Só precisamos de adicionar o atributo “múltiplo” ao elemento <select>. Agora, para selecionar múltiplas opções, você tem que adicionar um atributo de tamanho também ao elemento de seleção. Isto fará com que a caixa de seleção pareça uma caixa e não apenas a caixa drop-down.
O usuário tem que manter pressionada a tecla Ctrl (no Windows) e a tecla Command (no Mac) para selecionar as escolhas.
<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>Note estes pontos
-
O atributo “múltiplo” é um atributo booleano que, quando presente, significa que múltiplas opções podem ser escolhidas.
-
Da perspectiva de um web designer, o código HTML para seleções únicas e múltiplas seleções a partir de um drop-down difere um pouco, porém, da perspectiva do usuário final, essa diferença não é visível na página web. A caixa de seleção não mudaria seu layout ou estilo em nenhum dos casos. Portanto, o usuário deve ser informado como selecionar múltiplas opções a partir da caixa.
-
Dado o ponto mencionado acima, é uma melhor escolha escolher caixas de seleção ao invés de múltiplas seleções se o número de opções for menor.
-
A maneira de selecionar múltiplas opções a partir de uma caixa suspensa difere de um sistema operacional para outro. Enquanto o botão de controle (Ctrl) é usado para as seleções no Windows, o botão de comando faz o truque em sistemas Mac.
Enhancing the Dropdown
Como você pode ver, a caixa de seleção HTML nativo é bastante limitada especialmente para a escolha de múltiplas opções. É aqui que o JavaScript e as bibliotecas altamente eficazes entram na briga. O componente select2 jQuery dá ao designer o poder de personalizar o layout geral da caixa de seleção juntamente com a incorporação de opções de alta utilidade como pesquisa, carregamento dinâmico, etiquetagem, entre outras.
Does select2 suporta múltiplas seleções?
Select2 suporta múltiplas seleções na lista suspensa. Para ativar seleções múltiplas, basta incluir ‘múltiplas’ como um atributo.
A vantagem aqui é que o usuário não precisa pressionar Ctrl ou tecla Command para selecionar múltiplas opções.
<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 também adiciona outros aprimoramentos. Por exemplo, para limitar o número de escolhas que o usuário pode fazer, basta adicionar MaximumSelectionLength nas opções Select2 assim:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});Ler mais sobre Select2 na documentação