Tener desplegables en nuestra página web mejora la calidad general y el diseño en la pantalla.
Un desplegable funciona así como una alternativa y en casos específicos, una mejor opción, en comparación con los botones de radio y las casillas de verificación. Espera, ¿qué? ¿Hemos dicho una alternativa tanto a los botones de radio como a las casillas de verificación? Pero, debería haber sido sólo el botón de radio, ¿no?
Un botón de radio no permite más de una selección y una casilla de verificación, en cambio, permite una o más selecciones. Un usuario puede seleccionar sólo una opción de una lista desplegable y por lo tanto se asemeja sólo al botón de radio en su funcionalidad y no a las casillas de verificación, ¿verdad? Pues bien, aquí es donde entra en juego el concepto de selecciones múltiples en una caja de selección.
¿Cómo puedo permitir a los usuarios seleccionar múltiples opciones desde una caja de selección?
Desde la perspectiva de un diseñador web, permitir al usuario elegir múltiples opciones desde una caja de selección es bastante simple y sencillo. Sólo tenemos que añadir el atributo «multiple» al elemento <select>. Ahora, para poder seleccionar múltiples opciones, hay que añadir un atributo de tamaño también al elemento select. Esto hará que el cuadro de selección se vea como una caja en lugar de sólo el desplegable.
El usuario tiene que mantener pulsada la tecla Ctrl (en Windows) y la tecla Comando (en Mac) para seleccionar las opciones.
<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 estos puntos
-
El atributo «múltiple» es un atributo booleano que cuando está presente, significa que se pueden elegir múltiples opciones.
-
Desde la perspectiva de un diseñador web, el código HTML para selecciones simples y selecciones múltiples de un desplegable difiere un poco, sin embargo; desde la perspectiva del usuario final, esta diferencia no es visible en la página web. La caja de selección no cambiaría su diseño o estilo en ninguno de los dos casos. Por lo tanto, hay que indicar al usuario cómo seleccionar múltiples opciones de la caja.
-
Dado el punto mencionado anteriormente, es una mejor opción elegir casillas de verificación sobre selecciones múltiples si el número de opciones es menor.
-
La forma de seleccionar múltiples opciones de un desplegable difiere de un sistema operativo a otro. Mientras que el botón de control (Ctrl) se utiliza para las selecciones en Windows, el botón de comando hace el truco en los sistemas Mac.
Mejorar el desplegable
Como puede ver, el cuadro de selección nativo de HTML es bastante limitado, especialmente para la elección de múltiples opciones. Aquí es donde JavaScript y las librerías altamente efectivas entran en escena. El componente jQuery select2 da al diseñador el poder de personalizar el diseño general de la caja de selección junto con la incorporación de opciones de alta utilidad como la búsqueda, la carga dinámica, el etiquetado, entre otros.
¿Soporta select2 selecciones múltiples?
Select2 soporta selecciones múltiples en la lista desplegable. Para habilitar las selecciones múltiples, basta con incluir ‘multiple’ como atributo.
La ventaja aquí es que el usuario no tiene que pulsar la tecla Ctrl o Comando para seleccionar múltiples opciones.
<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 también añade otras mejoras. Por ejemplo, para limitar el número de elecciones que puede hacer el usuario, basta con añadir maximumSelectionLength en las opciones de Select2 de esta manera:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});Lea más sobre Select2 en la documentación