Plugin jQuery para crear un Multiselect con Bootstrap

DESCARGA : Multiselect

Plugin jQuery para crear un Multiselect con Bootstrap, sin duda una de las mejoras opciones que existen para mostrar una lista en un dropdown con opciones multiples, Bootstrap Multiselect tiene la facultad de modificar una etiqueta tipo select y convertirlo en cualquiera de estos ejemplos: http://davidstutz.github.io/bootstrap-multiselect/#further-examples

No es sencillo implementar ya que tiene muchas opciones, pero vamos con la documentación que esta en linea en mucho mas sencillo ver el comportamiento y el código de cada uno de los ejemplos, en este texto no se explicara a detalle la instalación de cada uno de los ejemplos: http://davidstutz.github.io/bootstrap-multiselect/ si no que se explicara la implementación básica toca realiza la implementación utilizando la documentación de los autores.

Para su implementación:

1.- incluimos las referencias del plugin.

<!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
 
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

2.- El elemento html (En este caso un elemento select lleno de option)

<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

3.- La creación de las referencias del plugin:

<!-- Initialize the plugin: -->
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-getting-started').multiselect();
    });
</script>

You may also like...