MultiSelect con CSS y jQuery UI

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

<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-150x150.png"></a></p></div>    $(function(){
        $.localise(&#039;ui-multiselect&#039;, {path: &#039;js/&#039;});
        $(".multiselect").multiselect();        
    });
</script>

2. Estructura 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>

Esto es todo lo que necesitamos para nuestro demo.

Ejemplo de MultiSelect con jQuery

jfdghjhthit45

También te puede interesar

3 Comments

  1. sebastian vera
    nov 06, 2010 @ 18:13:21

    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?

    • craftyman
      nov 08, 2010 @ 13:33:11

      Hola Sebastian, mandanos una url donde se pueda ver el error y podremos saber que es exactamente.

      saludos.

  2. Berlington
    ago 07, 2011 @ 15:25:37

    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 :)