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
