Desplegable multi-select con checkbox utilizando jQuery

Como sabéis, puedes seleccionar múltiples opciones en un desplegable <select> añadiendo el atributo “multiple”, pero como usuario, no es lo más usable. Para seleccionar varias opciones en un <select> con el atributo “multiple” debes dejar pulsado el botón Crtrl en Windows, o cmd en Mac. En este artículo crearemos un desplegable más usable en el que se podrán seleccionar las opciones mediante casillas, o checkboxes. Para ello, nos valdremos de jQuery.

Jquery Multiselect es un plugin de jQuery que transforma un <select> múltiple en un desplegable súper chulo con checkboxes. Esta plugin es muy sencillo de utilizar y muy útil para todo formulario web que se precie. Una vez dicho todo esto, vamos a ver cómo implementar un desplegable multi-select con checkbox utilizando jQuery.

Para implementar el desplegable multi-select con checkboxes, debemos incluir los dos ficheros del plugin (jquery.multiselect.css y jquery.multiselect.js) y la librería jQuery (jquery.min.js)

<link href="jquery.multiselect.css" rel="stylesheet" type="text/css">
<script src="jquery.min.js"></script>
<script src="jquery.multiselect.js"></script>

Ojo, la llamada al fichero jquery.multiselect.js debes ponerla después del <select>.

Opciones del desplegable en HTML

El elemento <select> crea un desplegable, y los tags <option> definen las opciones de dicho desplegable. Tendremos que definir el atributo multiple en el <select> para que el usuario pueda seleccionar múltiples opciones en el desplegable.

<select name="langOpt[]" multiple id="langOpt">
<option value="C++">C++</option>
<option value="C#">C#</option>
<option value="Java">Java</option>
<option value="Objective-C">Objective-C</option>
<option value="JavaScript">JavaScript</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Ruby on Rails">Ruby on Rails</option>
<option value="Android">Android</option>
<option value="iOS">iOS</option>
<option value="HTML">HTML</option>
<option value="XML">XML</option>
</select>

Código Javascript

Escribiremos algo de Javascript para seleccionar el desplegable y definir la opciones en multiselect({}); A continuación te mostramos el uso básico de este multiselect, y usos más avanzados.

Uso básico

$('#langOpt').multiselect({
    columns: 1,
    placeholder: 'Select Languages'
});

Multiselect con opción de buscador

$('#langOpt').multiselect({
    columns: 1,
    placeholder: 'Select Languages',
    search: true
});

Multiselect con opción de seleccionar todas las opciones

$('#langOpt').multiselect({
    columns: 1,
    placeholder: 'Select Languages',
    search: true,
    selectAll: true
});

Multiselect con optgroup

$('#langOptgroup').multiselect({
    columns: 4,
    placeholder: 'Select Languages',
    search: true,
    selectAll: true
});

Obtener las opciones seleccionadas con PHP

Una vez se envía el formulario, puedes obtener las opciones seleccionadas como un array utilizando el siguiente código.

$_POST['langOpt']

Fuente: codexworld.com