Select2
Select2 es un plugin jQuery que nos permite tener un selector de elementos con un cuadro de búsqueda poniendo así más sencillo encontrar lo que desea seleccionar el usuario. Es muy útil sobre todo en selectores donde se ofrecen infinidad de opciones, como por ejemplo un selector de país o ciudad.
Es 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 documentación es más extensa pareciendo ser mucho más completo.
Se puede implementar un selector múltiple como el que vemos en la imagen siguiente de forma muy sencilla:
Ver varios ejemplos en funcionamiento
En la documentación oficial del plugin podrán observar la infinidad de opciones que disponen y ver más ejemplos.
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
No puedo cargar los datos en el select2 al hacer la función editar, tendrán algún ejemplo?
Hola,
Lamentamos decir que no tenemos ningún ejemplo con editar y mantener los datos. Si usas PHP, tienes que tenerlos presente en el código html para hacer una condición para seleccionar aquellos elementos en el selector que están marcados. Para marcar una opción en el selector es algo así:
Espero te sirva,
Saludos
No me funciona cuando los campos son añadidos dinámicamente por el usuario (dependiendo de los que necesita va añadiendo con un botón añadir) con Jquery. Si los campos existen previamente en el HTML entonces si funciona bien.
Gracias.
Hola Jose,
tengo el mismo problema que el compañero.
En la demo hay 3 pero no se cargan de manera dinámica con JQuery.
Tengo que cada uno se cargue con un id diferente pero al cargar se dinámicamente es como si no se enterara y no salen con select2.
Se te ocurre como poder solucionarlo.
Muchas gracias de antemano.
Hola buenos días,
Creo que tan solo tienes que llamar a la función select2 3 veces. Una por cada selector. Por ejemplo:
$(«#selector1»).select2();
$(«#selector2»).select2();
$(«#selector3»).select2();
Saludos
Hola, estoy probando select2 con boostrap 3, en una vista normal todo esta bien, pero en una ventana modal de boostrap no funciona ni la busqueda ni el diseño. Me gustaria t ayuda con select2 y bootstrap modal. gracias
Hola José, como puedo añadir multiples elementos select2 dinamicamente, lo he intentado pero solo el primer elemento sale correcto los demás salen sin el select2
Hola, en la demo tenemos 3. Tan solo tienes que identificar cada select con un id distinto y que la llamada al plugin sea con ese id. 3 llamadas al plugin distintas.
una pregunta, existe alguna manera hacer combobox anidados en chosen?
Hola, no lo he hecho pero diría que si que se podría. Si visitas la página del autor verás que puedes añadir ajax dentro del select2.
https://select2.github.io/examples.html
Hola que tal… Podrias enseñar como capturar los valores enviados por el select… utilizando select2..?
Hola, en el caso del ejemplo en funcionamiento recibo mediante php el array $_POST típico de los formularios:
$_POST[‘countries’] es un array donde tengo los paises seleccionados en uno de los selects múltiples.
Saludos