Esos malditos select que tanto odié hoy vuelven a ser de mi agrado. Cuándo tienes una lista de opciones relativamente grande, los elementos select se vuelven de una usabilidad bastante pobre. Chosen es un plugin para jQuery que hace de estos elementos una interacción amigable con el usuario y además ofrece un control absoluto sobre su diseño (el aspecto de los elementos select no son totalmente controlables con CSS). En resumen, estas serían sus principales características:

  • Control absoluto del diseño del elemento select
  • Selección y deselección de opciones amigable. Olvídate de volver a pulsar la tecla “Ctrl”.
  • Opción de búsqueda entre las opciones, muy útil en select con muchas opciones, en especial de selección múltiple. Incluye sugerencias de búsqueda tomadas de las lista de opciones del select.

¿Cómo se usa?

Para empezar descarga Chosen para jQuery desde Github. Recuerda que Chosen es un plugin para jQuery, por lo que tendrás que cargar jQuery en tú página antes que Chosen. También es necesario cargar el CSS que viene en el paquete. Una vez hecho esto, basta inicializar Chosen mediante $(selector).chosen(), donde selector es un selector jQuery válido del elemento select en el que deseas aplicar Chosen. Por ejemplo, si el select tiene class="chosen":

<head>
    <link rel="stylesheet" href="chosen.css" type="text/css" />
    <script src="jquery.min.js"></script>
    <script src="chosen.jquery.js"></script>
    <script>
        $(document).ready(function(){
            $(".chosen").chosen();
       });
    </script>
</head>

Chosen ofrece muchas opciones, que veremos a continuación, y podemos configurarlas de este modo:

$(".chosen").chosen({opcion1: "Valor", opcion2: "Valor2", etc});

Ejemplos de uso

En cualquier caso el HTML del elemento select se construye de la misma forma que lo has hecho siempre. Para los ejemplos de este tutorial voy a utilizar las siguientes listas de selección:

<!-- selección única -->
<select name="miselect" class="chosen" data-placeholder="Elige un color">
    <option value=""></option>
    <option value="azul">Azul</option>
    <option value="amarillo">Amarillo</option>
    <option value="blanco">Blanco</option>
    <option value="gris">Gris</option>
    <option value="marron">Marrón</option>
    <option value="naranja">Naranja</option>
    <option value="negro">Negro</option>
    <option value="rojo">Rojo</option>
    <option value="verde">Verde</option>
    <option value="violeta">Violeta</option>
</select>

<!-- selección múltiple -->
<select cname="miselect[]" lass="chosen" data-placeholder="Elige tus colores favoritos" multiple>
    <option value="azul">Azul</option>
    <option value="amarillo">Amarillo</option>
    <option value="blanco">Blanco</option>
    <option value="gris">Gris</option>
    <option value="marron">Marrón</option>
    <option value="naranja">Naranja</option>
    <option value="negro">Negro</option>
    <option value="rojo">Rojo</option>
    <option value="verde">Verde</option>
    <option value="violeta">Violeta</option>
</select>

Antes de seleccionar ninguna opción podemos mostrar un texto personalizado tomado del valor del atributo data-placeholder. Nota como en el select de selección única la primera opción no tiene valor ni texto; esto es necesario para utilizar el texto personalizado si el select es de selección única.

Ejemplo: select de selección única

En los select de selección única la función de deselección no viene activada por defecto. Si queremos activar esta función debemos poner allow_single_deselect: true

$(".chosen").chosen({allow_single_deselect: true});

Si además queremos, por ejemplo, desactivar la opción de búsqueda, utilizaremos:

$(".chosen").chosen({allow_single_deselect: true, disable_search: true});

También se puede configurar chosen para que utilice la función de búsqueda sólo si la lista de opciones supera un cierto valor. Por ejemplo, si queremos que la función de búsqueda solo aparezca si hay más de 5 opciones:

$(".chosen").chosen({disable_search_threshold: 5});

Ejemplo: selección múltiple

La función de deselección viene activada por defecto para los select con selección múltiple y no se puede desactivar ni tampoco la función de búsqueda.

Una opción muy interesante en selección múltiple es poder limitar el número máximo de selecciones:

$(".chosen").chosen({max_selected_options: 3});

Y si queremos lanzar alguna función cuándo se alcanza el número máximo de selecciones:

$(".chosen").bind("chosen:maxselected", function () {
    alert("Máximo número de elementos seleccionado")
});

Demo

Espero que Chosen para jQuery te guste tanto como a mí y vuelvas a disfrutar de los elementos select. Si quieres más información y más ejemplos, visita este link.

  • gera rojas

    Hola juan primero que nada , muy buena explicación. Veras tengo un problemita , veras yo uso el chosen múltiple y tengo un valor máximo de dos, bueno el caso es que quiero validar que se seleccione al menos uno. he usado validator.js para validar y funciona pero no me marca en contorno rojo como lo hace con otros select. Sabras algun otro método de validar si esta seleccionado al menos uno?…
    Gracias y saludos.

    • Hola gera,

      Si lo que quieres es forzar que se tenga que seleccionar al menos una opción, yo lo entiendo como campo requerido. El atributo `required` de HTML5 te debería ser suficiente.

      Pero no sé que decirte, leyendo tu comentario parece que el problema no lo tienes con validar, pues como dices lo has conseguido, sino con darle estilo adecuado a un campo cuándo no es validado con validator.js. Nunca he utilizado validator.js, así que no te puedo ayudar con el.

  • J.R. Orozco

    Juan , buenas noches, oye estoy probando el select multiple poniendolo dentro de una forma y enviando por metodo POST a un script en PHP pero solo envia el ultimo color seleccionado, tendrás idea de que puede estar pasando ??

    • Sin ver el código es imposible saber que falla, sólo puedo jugar a “adivinar”. Y jugando apuesto a que el atributo name del select no está en forma de array. Para selección múltiple tiene que se algo así (nota los corchetes):

    • J.R. Orozco

      Juan, efectivamente ese era el problema , adivinaste perfecto, mil gracias, seguiré probando y te informo. Tengo uno SELECTS anidados y quiero ver como se comporta chosen ya que el segundo select se reescribe en base a la seleccion del primero y No se si chosen mantendrá el vinculo.Un abrazo.

  • J.R. Orozco

    Perdon creo que ya lo entendí , lo hace por css . saludos y mil disculpas por la pregunta.

  • J.R. Orozco

    Hola buenas noches, muy util tu información para la implementacion de este plug in , te comento tienes un error en el bind (es chosen en vez de liszt) .Tengo una pregunta , como limitas el numero de items que despliegas por que si son por ejemplo 100 va salir una lista muy larga .Saludos y muchas gracias por tu aportación.

    • Gracias por avisar del error. En el demo estaba bien, no se como se coló ese fallo en el otro lado 🙁

  • Andrés Restrepo

    Hola que tal me anime mucho a usar este tipo de select pero me encontré con lo siguiente, yo tengo
    una lista y un campo múltiple y desde la lista agrego los valores al campo múltiple pero me he encontrado que no me adiciona los elementos seleccionados, me agrega otro cualquiera, compare ambos valores de listas y me di cuenta que los valores de cada lista no coinciden, entonces fui a la base de datos y note que habían saltos del del id 20 se pasaba al id 25 arregle los saltos de id en al base de datos y ahora la lista me da los mismos valores o identificadores que genera chosen, pero cuando lo selecciono y lo agrego al campo multiple me agrega unos correctamente y otros no es decir me asigna el que sigue en la segunda o tercera posición del valor seleccionado en la lista, use el chosen:update y no me funciono.
    espero me puedas dar algún tipo de ayuda de antemano muchas gracias

  • Victor Salinas

    Me he cansado de buscar pero chosen lo único que le falta es poder parametrizar a partir de que caracter deseamos consultar, cosa que si hacen otros plug ins 🙁

    • Le falta eso y muchas más cosas que hacen otros. La verdad es que Chosen se ha quedado anclado en el número de características. Por ejemplo, el número de cosas que ofrece Select2 es mucho mayor que las que ofrece Chosen. Pero también es verdad es que son características que no utilizan la mayoría y si no las vas a utilizar no merece la pena. La versión completa de Select2 minificada pesa 71 KB, Chonsen tan sólo 28 KB. Ya cada uno que eliga lo que necesita.

  • yorprog

    hola quisiera llenar el select dinamicamente pero no me funciona

  • Miguel Pérez Monsalve

    Disculpa, hay alguna forma de seleccionar la misma opción más de una vez??
    Saludos.

    • La verdad es que es algo que no se me ha pasado nunca por la cabeza y no sé si Chosen dejará hacer algo parecido pero creo que no; elegir una opción más de una vez en un <select> es algo bastante raro. ¿Qué es lo que te propones exactamente? Creo que podrías estar equivocado en el planteamiento.

    • Miguel Pérez Monsalve

      Es para una web de administración médica, pasa que existen unos paquetes que se llenan con prestaciones médicas, y el cliente dice que en ese pack de prestaciones, una prestación puede estar más de una vez. No se si se entiende …

    • En un elemento <select>, por definición, no se puede seleccionar la misma opción más de una vez. Para mi es completamente lógico. Tendrás que implementar esa funcionalidad por tí mismo, creo Chosen no lo ha hecho (hasta dónde yo se). Select2 lo tiene previsto para la versión 4.0 (versión actual 4.0-rc2), le puedes echar un vistazo.

  • Midnight

    Disculpa, he consultado varios post de como usarlo, implemento todo pero no surge ningún cambio

    • Hola Midnight. “Implemento todo pero no funciona” da poca información sobre que puede estar pasando. Tendría que ver el código que utilizas.