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