Chosen

Chosen es un plugin para jQuery creado por Harvest que nos permite convertir nuestros campos de selección en un recurso más amigable para el usuario y con un diseño más atractivo.

chosen

Para añadir este fantástico selector de opciones a tu página Web tan solo tienes que añadir en el <head> la librería jQuery, el plugin, su llamada y los estilos necesarios.

Un ejemplo de llamada al plugin podría ser el siguiente:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".chosen-select").chosen({no_results_text:'No hay resultados para '});
});
</script>

En el <body> de nuestra página tendriamos nuestro formulario con el selector con class=”chosen-select”.

<select class="chosen-select" data-placeholder="Seleccione país..." style="width:350px;" tabindex="1">
    <option value=""></option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    ...
</select>

Ver ejemplo en funcionamiento

Descargar

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

7 respuestas a “Chosen”

  1. […] un plugin muy parecido al de Chosen que ya hemos hecho mención en anteriores posts pero este incorpora más opciones o al menos su […]

  2. yeyson dice:

    Y cómo hago para guardar seleccion multiple en mysql?

  3. Orlando dice:

    Hay un problema de compatibilidad en venta modal bootstrap.

  4. rodrigo dice:

    como puedo mostrar los datos a buscar desde mysql

  5. Alberth dice:

    Buenas me parece interesante el plugin pero como cargo un dato desde jquery al chosen

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre