Multiselect con CSS y jQuery
Los MultiSelect sirven para poder elegir varios items de un select, estos son muy complicados de utilizar debido a su facilidad de seleccionar y deseleccionar, para esto podemos utilizar este plugin de jQuery que nos permite incluso ordenar y filtrar items de un MultiSelect.
Se pueden ir seleccionando elementos de la parte derecha para agregarlos a la parte izquierda dejándolos como seleccionados. Cuando se tienen muchos elementos para seleccionar se pueden agregar todos o buscar uno en concreto disponiendo de un buscador.
Para disponer de este multiselect será necesario incluir las librerías jQuery y CSS necesarios en el <head> de nuestra página para obtener los resultados:
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/ui.all.css" />
<link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/ui.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$.localise('ui-multiselect', {path: 'js/'});
$(".multiselect").multiselect();
});
</script>
Seguidamente en el <body> podríamos tener un formulario como el siguiente:
<form action="index.php" method="post"> <select id="tags" name="tags[]" multiple="multiple" > <option value="css">CSS</option> <option value="php">PHP</option> <option value="javascript">JavaScript</option> <option value="seo">SEO</option> <option value="wordpress">WordPress</option> <option value="socialmedia">SocialMedia</option> </select> <input type="submit" name="enviar" value="Enviar" /> </form>
En este caso las opciones están escritas directamente en el código HTML pero se podría por ejemplo recoger de una base de datos con facilidad.
Luego para recibir los datos enviados con PHP, las opciones seleccionadas estarán en el vector «tags» que podemos recorrer de la siguiente forma:
<?php
if (isset($_POST['enviar'])) {
echo '<p>Opciones seleccionadas: ';
foreach ($_POST['tags'] as $tag)
echo $tag.' ';
echo '</p>';
}
?>
Autor
¿Buscas trabajo de programador?
5 respuestas a “Multiselect con CSS y jQuery”
Deja una respuesta
26 artículos que te podrían interesar
Ver más sobre
amigo y cuando quiero desleccionar todos por codigo como hago?
es una funcionalidad que se la dejo que la piense la comunidad a ver que sugerencias salen.
[…] Muchos usuarios me han solicitado la creación de un tutorial que presente un multiselect dinámico asociado a una base de datos habiendo visto previamente el artículo referente a un plugin jQuery ya existente: Multiselect. […]
excelente blog jose aguilar podrias poner el ejemplo con una base de datos te lo agradeceria muchisimo.. gracias de antemano
Posiblemente te pueda servir lo siguiente:
http://www.jose-aguilar.com/blog/multiselect-con-jquery-ajax-y-php/
Saludos,