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

3 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??