Multiselect con jQuery, Ajax y PHP

Name: Multiselect con jQuery, Ajax y PHP
Brand: Jose Aguilar
SKU: joseaguilarblog-6010
Availability: InStock
Rating: 5 (7 reviews)

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.

Este plugin funciona de maravilla para la acción de multiseleccionar registros pero no he visto viable darle dinamismo interactuando con una base de datos.

En este artículo vamos a ver una forma sencilla para crear un multiselect personalizado sin utilizar plugins y con interacción con una base de datos.

En nuestra página lo primero que tendremos que hacer es conectar mediante PHP y MySQLi a la base de datos deseada:

<?php
$conexion = new mysqli(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, DB_DATABASE);
?>

En el ejemplo que vamos a ilustrar vamos a interactuar con una tabla de usuarios que tiene las siguientes características:

Para este tutorial nos vamos a centrar tan solo en la idUsuario, usuario y selected. Este último atributo con mayor énfasis ya que será el que determinará si un usuario ha sido elegido o no.

En el <body> de nuestra página tendremos el código HTML y PHP con el que conseguiremos visualizar las 2 listas de usuarios. En una banda se muestran los usuarios seleccionados y en la otra el resto de usuarios por seleccionar.

Esto en código se traduce como:

<div id="multiselect">
    <div class="left">
        <h3>Usuarios elegidos</h3>
        <ul>
            <?php
            $result = $conexion->query("SELECT `idUsuario`, `usuario`, `selected` FROM `usuarios` WHERE selected=1");
            if ($result->num_rows > 0) {
                while ($row_users = $result->fetch_assoc()) {                
                    echo '<li id="user-'.$row_users['idUsuario'].'" data="'.$row_users['idUsuario'].'">'.$row_users['usuario'].'</li>';
                }
            }
            ?>
         </ul>
         <a href="#" id="remove">Quitar todos</a>
    </div>

    <div class="right">
           <h3>Usuarios</h3>
        <ul>
            <?php
            $result = $conexion->query("SELECT `idUsuario`, `usuario`, `selected` FROM `usuarios` WHERE selected=0");
            if ($result->num_rows > 0) {
                while ($row_users = $result->fetch_assoc()) {                
                    echo '<li id="user-'.$row_users['idUsuario'].'" data="'.$row_users['idUsuario'].'">'.$row_users['usuario'].'</li>';
                }
            }
            ?>
        </ul>
        <a href="#" id="add">Añadir todo</a>
    </div>
</div>

Dentro de la etiqueta <head> de nuestra página añadiremos la librería jQuery y los scripts necesarios para realizar los efectos:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {    
    $('#multiselect .right ul li').live('click',function() {

        var user = $(this).text();
        var data = $(this).attr('data');
        var id = $(this).attr('id');

        $('#multiselect .left ul').append('<li id="'+id+'" data="'+data+'">'+$(this).text()+'</li>');
        $('#multiselect .right ul #'+id).remove();

        var dataString = 'action=add&id='+data;

        $.ajax({
            type: "POST",
            url: "select.php",
            data: dataString,
            success: function() {

            }
        });
    });  

    $('#remove').live('click', function() {    
        $('#multiselect .left ul li').each(function(){
            $('#multiselect .right ul').append('<li id="'+$(this).attr('id')+'" data="'+$(this).attr('data')+'">'+$(this).text()+'</li>');
            $(this).remove();
        });

        var dataString = 'action=removeall';
        $.ajax({
            type: "POST",
            url: "select.php",
            data: dataString,
            success: function() {

            }
        });
        return false;
    });  

    $('#add').live('click', function() {    
        $('#multiselect .right ul li').each(function(){
            $('#multiselect .left ul').append('<li id="'+$(this).attr('id')+'" data="'+$(this).attr('data')+'">'+$(this).text()+'</li>');
            $(this).remove();
        });

        var dataString = 'action=addall';
        $.ajax({
            type: "POST",
            url: "select.php",
            data: dataString,
            success: function() {

            }
        });
        return false;
    });            
});    
</script>

En el código anterior lo que tenemos son las acciones que se van a producir tras pulsar en un usuario, pulsar en el link de Añadir todo y pulsar en el link de quitar todo.

Al hacer click en un usuario de la lista lo que hacemos es añadirlo a la lista de usuarios seleccionados y quitarlo de la lista de usuarios ejecutando un archivo mediante la técnica AJAX para actualizar el registro que indica si un usuario ha sido elegido o no.

Al hacer click en «Añadir todo», por cada elemento del listado lo movemos al listado de seleccionados y lo eliminados del listado de usuarios. En el caso de «Quitar todo» hacemos la inversa.

En el archivo select.php tenemos lo siguiente:

<?php
$conexion = new mysqli(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, DB_DATABASE);

$id = $_POST['id'];
$action = $_POST['action'];

switch($action) {
    case 'add':
        $update = "UPDATE usuarios SET selected = 1 WHERE idUsuario = ".$id; 
        break;
    case 'addall':
        $update = "UPDATE usuarios SET selected = 1 WHERE selected = 0"; 
        break;
    case 'removeall':
        $update = "UPDATE usuarios SET selected = 0 WHERE selected = 1"; 
}

$conexion->query($update);
?>

Según la opción que estemos realizando, ejecutaremos una query u otra.

Ahora solo faltaría añadir algo de estilos que como podrás observar será muy sencillo personalizarlo:

#multiselect {
    float:left;
    width:100%;

}

#multiselect .left {
    float:left;
    width:290px;
    padding:10px;
}

#multiselect .right {
    float:right;
    width:290px;
    padding:10px;

}

#multiselect ul {
    border:1px solid #999999;
    background-color:#eee;
    width:272px;
    height:150px;
    overflow: auto;
    float:left;
    margin:0px;
    padding:0px;
}

#multiselect ul li {
    background-color:#CCCCCC;
    border-bottom:1px solid #999999;
    float:left;
    width:98%;
    padding-left:5px;
    list-style:none;
    cursor:pointer;
}

#multiselect ul li:hover {
    background-color:#999999;
}

Ver el ejemplo en funcionamiento

Si te ha servido este tutorial hazte fan de la página de facebook del blog Jose Aguilar o síguenos a través de Twitter.

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(7 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

2 respuestas a “Multiselect con jQuery, Ajax y PHP”

Christian Altuve dice:

23/06/2014 a las 1:35

Como haría para que el multiselect del lado donde dice «Usuarios Elegidos» me permita eliminarlos uno por uno, es decir poder eliminarlos de la misma forma como los agregue. Agradecería mucho su ayuda.

Responder
alejandro dice:

07/11/2013 a las 3:30

hola tengo un problema ala hora de hacer una edicion de un multiselect es decir cuando agrego registros a la base de datos se guardan en un campo pero el problema viene a la hora de traer esos datos y colocarlos como «selected» en el multiselect

Responder