MultiSelect con CSS y jQuery UI

By
tednologia
-
3
438

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.

1. Incluir las librerías JavaScript y CSS

[html]
<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">
<div style="display: none"><p><a href="http://how-to-get-ex-back.org/"><img src="http://tednologia.com/wp-content/uploads/2013/06/g8sem82-150×150.png"></a></p></div> $(function(){
$.localise(&#039;ui-multiselect&#039;, {path: &#039;js/&#039;});
$(".multiselect").multiselect();
});
</script>
[/html]

2. Estructura HTML

[html]
<select id="tags" name="tags[]" class="multiselect" 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>
[/html]
Esto es todo lo que necesitamos para nuestro demo.

Ejemplo de MultiSelect con jQuery

jfdghjhthit45

RELATED ARTICLESMORE FROM AUTHOR

3 COMMENTS

  1. Hola, tengo un problema con el multiselect, cuando lo adjunto y lo hago correr en un select, me sale el select pequeño, como si su width fuera muy pequeño al igual que su height, a pesar de q funciona no se ve bien, me podrias ayudar?

  2. Primero que todo felicitarlos por tan excelente aporte.
    Ya lo integré para cambiar los valores OPTION, sin embargo no he logrado que se refresquen automáticamente y quisiera saber que puedo hacer?
    Para refrescar los valores le agregué lo siguiente:
    var options = »;
    for (var i = 0; i < j.length; i++) {
    options += '’ + k[i] + »;
    }
    $(«#tags»).html(options);
    $(‘#tags option:first’).attr(‘selected’, ‘selected’);
    Acepto cualquier ayuda.
    Saludos 🙂

Comments are closed.