miércoles, 24 de junio de 2009

Cómo pasar elementos desde una lista a otra con javascript: con la ayuda de jQuery

Intercambio de items entre listas con jQuery

Como digo siempre el verdadero poder de jQuery se encuentra en los selectores, si bien uno se entusiasma inicialmente con los efectos, animaciones, etc. con el tiempo uno se da cuenta que en el día a día jQuery y sus selectores son sus verdadres aliados, para demostrar esto vamos a ver un ejemplo sencillo de una tarea no tan simple

Seguramente les ha tocado tener que hacer la típica pantalla con dos listas, en la cual se pasan elementos de una a la otra. Se habrán encontrado con algunos problemas para localizar los elementos, verificar que cuando querramos pasar de una lista a la otra haya algo seleccionado, etc. He visto ejemplos de código bien pulidos con unas cuantas líneas de javascript y no tan claro pero que funcionan, bueno, vamos a ver cómo se puede hacer esto con jQuery con 3 o 4 líneas gracias a los selectores

<script language="javascript" type="text/javascript">
$(function()
{
    $("#add").click(function()
    {
        mover("origen", "destino");
    }); 
    
    $("#remove").click(function()
    {
        mover("destino","origen");
    });           
});

function mover(origen, destino)
{
    $("#" + origen + " option:selected").remove().appendTo("#" + destino);
}
</script>

Y el HTML sería

<table>
    <tr>
        <td>
            <select id="origen" multiple="multiple" size="5">
                <option value="1">uno</option>
                <option value="2">dos</option>
                <option value="3">tres</option>
                <option value="4">cuatro</option>
            </select>
        </td>
        <td>
            <input type="button" id="add" value=">" /><br />
            <input type="button" id="remove" value="<" />
        </td>
        <td>
            <select id="destino" size="5">
                <option value="5">cinco</option>
            </select>
        </td>
    </tr>
</table>

Mágico, no sólo es sencillo, sino que podemos usar la función mover para mover elementos desde cualquier lista a otra con varios elementos seleccionados, incluso si fuera un combo y todo gracias a los selectores. Hasta la próxima

4 comentarios:

rc dijo...

Muy bueno el tutorial, me ha sido de mucha utilidad gracias por su publicacion! :):):):):):)

Leonardo Micheloni dijo...

Por nada, gracias por dejar tu comentario, saludos! y feliz año nuevo :)

janeth pahua dijo...

COMO PUEDO OBTENER LOS DATOS QUE PASO AL OTRO SELECT MULTIPLE??

hy dijo...

Hola,

Quizá para Janeth sea un poco tarde pero espero que en lo futuro esto sea de ayuda para alguien:

(no usare acentos)


En el select 'destino' del ejemplo original solamente necesitas agregarle un name

select id="destino" name="seleccionados" ...


Del lado de server, capturas este campo:

Fundamentalmente uso Perl, pero puedes adaptar al lenguaje de tu preferencia:


#!/usr/bin/perl -w
use CGI qw/:standard/;

my @seleccionados = param('seleccionados'); # aqui capturamos los datos del select
# al que nombramos "seleccionados"

# se utiliza un array en lugar de un escalar ($seleccionados) porque
# puede que venga más de 1 solo dato.

# si usas una variable tipo escalar (de las que en perl empiezan su nombre con el simbolo $)
# si el cliente selecciono mas de 1 opcion, solamento capturaras la primera de ellas

# asi debes usar un varible tipo array aunque venga un solo dato, luego podemos recorrer el arreglo para procesar

foreach my $elem (@seleccionados) {

Funcion_que_Procesa_elementos($elem);

# o

lista_de_comandos_que_aplicamos_a_cada_ elemento;

}

# si necesitas saber cuantos elementos seleccionados capturamos:

my $cuentos_elementos = @seleccionados;

# si quieres "aplanar" la lista para que obtengamos una cadena, es conveniente cambiar
# el separador de elementos de un arreglo que por omision es un espacio


$" = ', '; # cambiamos el espacio separador por una COMA seguida de un espacio:

my $los_elementos_del_arreglo = "@seleccionados";

$" = ' '; # regresamos el separador a su valor normal: 1 espacio

# si, por ejemplo, si @seleccionados tiene estos datos: 1 3 6 9

# entonces la variable $los_elementos_del_arreglo contendra lad cadena (string):

1, 3, 6, 9

# si en lugar de fijar el separador como solo una COMA $" = ','
# la cadena contenida en $los_elementos_del_arreglo sera:

1,3,6,9

Saludos y gracias mil al Sr. Micheloni!

hy