Hoy estaba pensando en crear un artículo hablando de uno de los elementos HTML menos usables: el select multiple, pero afortunadamente encontré un excelente artículo de Ryan Cramer que resume mis opiniones:

• Ante la situación de tener un formulario, el cual posee un campo en donde el usuario puede elegir varios ítems de un listado mediano/grande, utilizar un select multiple puede ser una fuente inagotable de problemas para el usuario:

  • En primer lugar, por la “casi” obligación de utilizar Ctrl+Click para seleccionar opciones diferentes ¿A quién no le pasó seleccionar las opciones, realizar un click sin querer y perder todo lo que se había seleccionado? Y si se seleccionó un ítem no deseado, ¿tener que volver a hacer Ctrl+Click para deseleccionarlo?

  • En segundo lugar, por la poca visibilidad de las opciones. Está claro que el select múltiple puede tener la ventaja de comprimir todo en un pequeño espacio, pero por otro lado, es un elemento mentiroso: no deja a primera vista saber ante cuantas opciones uno se enfrente, tan solo podemos hacer un cálculo aproximado midiendo el largo de la barra de scroll (la cual ante un número X de ítems, deja de achicarse…)

• Reemplazar un select múltiple por checkboxs es una buena alternativa pero solamente ante un número limitado de opciones (aunque ese número puede aumentar dependiendo como se acomoden los elementos, por ejemplo, no es lo mismo tener 10 checkbox uno debajo del otro que en dos columnas de 5)

• Por otro lado, existen implementaciones con JS que permiten mejorar las experiencia, como por ejemplo asmSelect y Micro Select (plugins de jQuery) ó jQuery UI Multiple Select Widget, claro que implementarlos implican un “gasto” extra en tiempo de desarrollo.

¿Ustedes qué piensan? ¿Conocen alguna solución mejor? ¿Qué experiencia tienen? Si lo desean pueden comentarlo en Twitter @dzignus

Actualización: Carlos Macias realizo un script que permite obtener el mismo funcionamiento que los select multiple, pero sin depender del teclado para seleccionar varias opciones. Además funciona sin necesidad de tener algún framework JS. Demo

Actualización 2: Chosen: Alternativa más amigable al elemento select

Hace un par de semanas encontré de forma separada dos proyectos open source desarrollados por Mercado Libre y me pareció interesante hablar un poco de que tratan:

• Chico UI: Es un conjunto de componentes visuales/widgets realizados con CSS/JS:
  • Sistema CSS de grillas para realizar maquetaciones;
  • Tooltips y ventanas modales;
  • Menús desplegables y expandibles;
  • Sistema de pestañas y carousel de imágenes;
  • Manejo y validación de formularios

  Las funcionalidades JavaScript están basadas en jQuery

• Cacique: Es un sistema para el manejo de los procesos de automatización y testing, enfocado para no duplicar esfuerzos y reutilizar lo realizado. Basado en Selenium para grabar las acciones, les recomiendo ésta presentación en donde se explican sus características en profundidad.