Ordenar listas en JavaScript

Me gustaría saber como en JavaScript teniendo dos listas (A y B) puedo pasar elementos de la lista A a la B y viceversa, y también como ordenar los elementos de una de las listas (esta ordenación se haría con dos botones "arriba" y "abajo" al lado de la lista que deseo ordenar). Gracias de antemano por las respuestas. Puntúo excelente.

1 respuesta

Respuesta
1
Para hacer que los elementos de dos listas se muevan entre ellas, tienes que utilizar dos funciones de javascript. Las ha llamado "QuitarElemento()" y "AnadirElemento()". Básicamente, el funcionamiento de estas funciones es el siguiente: La función quietarElemento recorre todos los elementos de la lista A y, si están seleccionados, se incluyen en un array, para que luego se quiten de la lista A. La función AnadirElemento() recorre todos los elementos de la lista B y si están seleccionados, se añaden a la lista A, teniendo en cuenta que si ya están, no se añaden.
El código está bastante comentado, así que creo que te será fácil "pillar" el truco.
Este es el código que debes copiar en tu página:
<script language="JavaScript">
var miForm = document.nombreFormulario;
var aux = new Array();
function QuitarElemento()
{
// Recorremos toda la lista de "elementoListaA" para ir viendo cual está
for (i=0 ; i<document.nombreFormulario.elementoListaA.options.length ; i++)
{
if (document.nombreFormulario.elementoListaA.options.selected)
{
// Actualizamos el array "elementoListaAnadir"
j=0;
encontrado = false;
// Quitamos los elementoLista del select
aux[aux.length] = i;
}
}
for (h=aux.length-1;h>=0;h--)
{
document.nombreFormulario.elementoListaA.options[aux[h]] = null;
}
aux.length = 0;
//return true;
}
function AnadirElemento()
{
var j=0;
var encontrado = false;
var aux;
var RP = document.nombreFormulario.elementoListaB;
var RE = document.nombreFormulario.elementoListaA;
// Recorremos toda la lista de "elementoListaA" para ir viendo cual está
for (i=0 ; i < RP.options.length ; i++)
{
// Si está seleccionado...
if (RP.options.selected)
{
// Actualizamos el array "elementosAnadir"
j=0;
encontrado = false;
while (j < RE.length && !encontrado)
{
// Si no se encuentra en la lista, lo añadimos
if (RP.options.value == RE.options[j].value)
encontrado = true;
j++;
}
if (!encontrado)
{
// Añadimos el elemento a la lista
aux = RP.options.value.split(",");
RE.options[RE.length] = new Option (aux[0], RP.options.value);
aux = null;
}
}
}
// return true;
}
</script>
En los botones debes hacer la llamada a las funciones, para que funcione. Ten en cuenta que yo he llamado a los "select" como "elementoListaA" y "elementoListaB", y que los dos deben tené la propiedad "multiple" para que se puedan seleccionar varios elementos a la vez.
Hola gracias por tu respuesta, ya tienes el excelente pero podrías contestar a esta otra, ¿por favor?
Necesito también ordenar una de las listas, esta ordenación se haría con dos botones "arriba" y "abajo" al lado de la lista que deseo ordenar. Hago click en un elemento y luego en arriba o abajo para desplazarlo en el interior de la lista.
Para poder hacer lo que quieres, debes reutilizar bastante código del que te he puesto antes. La idea es: Al principio tienes un "select" y un array. Para el caso de querer subir el elemento, tendrás que ir recorriendo los elementos del select hasta el anterior al seleccionado e ir colocándolos en el array. Luego colocas el seleccionado y a continuación el anterior al seleccionado. Luego sigues metiendo el resto de los elementos que hay.
Borras los elementos del select y le añades todos los elementos del array. No te pongo todo el código porque es muy parecido a lo anterior, pero si tienes alguna duda sobre alguna parte de lo que tienes que hacer dímela, ¿vale?
Estoy haciendo lo que me dices y no se como hacer los botones, yo hago esto:
<input type="submit" value="para ir de B a A" onClick="AnadirElemento">
<input type="submit" value="para ir de A a B" onClick="QuitarElemento">
No pongas que el botón es un submit, porque si lo haces, después de hacer el evento onclick luego hará el submit del formulario. Además, la sintaxis de la llamada a la función no esta bien. Así que lo que tienes que hacer es esto:
<input type="button" value="para ir de B a A" onClick="javascript:AnadirElemento();">
<input type="button" value="para ir de A a B" onClick="javascript:QuitarElemento();">
Si quieres que sea submit, en vez de ponerlo en el evento onclick, hazlo en el evento "onsubmit".
Perdona que te moleste tanto pero es que he hecho lo que me dices y no me funciona, yo intento pasar elementos de la lista A a la B con un botón, te envío el código de mi página:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Page d'accueil</title>
</head>
<body>
<script language="JavaScript">
var miForm = document.nombreFormulario;
var aux = new Array();
function QuitarElemento()
{
for (i=0 ; i<document.nombreFormulario.elementoListaA.options.length ; i++)
{
if (document.nombreFormulario.elementoListaA.options.selected)
{
j=0;
encontrado = false;
aux[aux.length] = i;
}
}
for (h=aux.length-1;h>=0;h--)
{
document.nombreFormulario.elementoListaA.options[aux[h]] = null;
}
aux.length = 0;
}
function AnadirElemento()
{
var j=0;
var encontrado = false;
var aux;
var RP = document.nombreFormulario.elementoListaB;
var RE = document.nombreFormulario.elementoListaA;
for (i=0 ; i < RP.options.length ; i++)
{
if (RP.options.selected)
{
j=0;
encontrado = false;
while (j < RE.length && !encontrado)
{
if (RP.options.value == RE.options[j].value)
encontrado = true;
j++;
}
if (!encontrado)
{
aux = RP.options.value.split(",");
RE.options[RE.length] = new Option (aux[0], RP.options.value);
aux = null;
}
}
}
}
</script>
<form name=nombreFormulario>
<select multiple name="elementoListaA">
<option selected>elementoA 1</option>
<option>elementoA 2</option>
<option>elementoA 3</option>
</select>
<input type="button" value="para ir de A a B" onClick="javascript: AnadirElemento(); QuitarElemento();">
<select multiple name="elementoListaB">
<option selected>elementoB 1</option>
<option>elementoB 2</option>
<option>elementoB 3</option>
</select>
</form>
</body>
</html>
A ver, si te fijas en lo que hace cada función, podrás ver que la función QuitarElemento(), quita un elemento de una lista, pero no lo pasa a la siguiente. Para hacer esto tienes que modificar esta función y, después de quitarlo de la lista A, meterlo en la lista B (como si fuera la función AñadirElemento, pero dentro de la función Quitar). Así, podrás hacer que un elemento pase de una lista a otra. Por tanto, coge el código de la función AñadirElemento que hace que se añada un array en el select y ponlo en la función QuitarElemento. Ten en cuenta el nombre de los "select", porque depende que quieras hacer así debes poner uno u otro.
Lo que no puedes hacer es llamar a las dos funciones a la vez, porque no hará nada!.
Hola de nuevo,
Perdona que te moleste otra vez pero llevo trabajando varios días sobre el problema y no consigo hacer que funcione, he intentado hacer lo que me dices, meter el código de la función añadirelemento en el código de quitarelemento y no me funciona. Te en vio el código de mi página html para que veas lo que hago. Gracias por la ayuda porque ya no se que hacer.
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Pagina de prueba</title>
</head>
<body>
<script language="JavaScript">
var aux = new Array();
var aux2;
function QuitarElemento()
{
var j=0;
var encontrado = false;
var RE = document.nombreFormulario.elementoListaB;
var RP = document.nombreFormulario.elementoListaA;
for (i=0 ; i<RP.options.length ; i++)
{
if (document.nombreFormulario.elementoListaA.options.selected)
{
j=0;
encontrado = false;
while (j < RE.options.length && !encontrado)
{
if (RP.options.value = RE.options[j].value)
encontrado = true;
j++;
}
if (!encontrado)
{
aux = RP.options.value.split(",");
RE.options[RE.length] = new Option (aux[0], RP.options.value);
aux = null;
}
aux[aux.length] = i;
}
}
for (h=aux.length-1;h>=0;h--)
{
document.nombreFormulario.elementoListaA.options[aux[h]] = null;
}
aux.length = 0;
}
</script>
<form name=nombreFormulario>
<select multiple name="elementoListaA">
<option value="EA1" SELECTED>elementoA 1</option>
<option value="EA2">elementoA 2</option>
<option value="EA3">elementoA 3</option>
</select>
<input type="button" value="para ir de A a B" onClick="javascript: QuitarElemento();">
<select multiple name="elementoListaB">
<option value="EB1" SELECTED>elementoB 1</option>
<option value="EB2">elementoB 2</option>
<option value="EB3">elementoB 3</option>
</select>
</form>
</body>
</html>
Te mando el código para que los elementos seleccionados en el select de la izda se añadan al de la derecha y se eliminen del de la izda. Creo que esto es lo que quieres hacer, pero si no es así dímelo, porque me estoy empezando a liar con que es lo que quieres que haga la función (he tenido que leerme la pregunta, toda ella, unas cuantas veces je je).
En fin que solo tienes que hacer copy->paste y a funcionar. Allá va:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Pagina de prueba</title>
</head>
<body>
<script language="JavaScript">
var aux;
var aux2;
function QuitarElemento()
{
var j=0;
var encontrado = false;
var texto = new Array();
var valor = new Array();
// texto.length = 0;
// valor.length = 0;
var SA = document.nombreFormulario.elementoListaB;
var SQ = document.nombreFormulario.elementoListaA;
// Código para ver cual son los que hay que eliminar de un select e incluirlos en el otro.
for (i=0 ; i<SQ.options.length ; i++)
{
// Los que están seleccionados, comprobamos que no están en la segunda lista y si es así, lo añadimos a esta.
if (SQ.options.selected)
{
j=0;
encontrado = false;
while (j < SA.options.length && !encontrado)
{
if (SQ.options.value == SA.options[j].value)
{
encontrado = true;
}
j++;
}
if (!encontrado)
{
texto[texto.length] = SQ.options.text;
valor[valor.length] = SQ.options.value;
}
}
}
// Eliminamos de uno y lo incluimos en el otro.
for (h=texto.length-1;h>=0;h--)
{
SA.options[SA.options.length] = new Option (texto[h], valor[h]);
SQ.options[texto[h]] = null;
}
}
</script>
<form name=nombreFormulario>
<select multiple name="elementoListaA">
<option value="EA1" SELECTED>elementoA 1</option>
<option value="EA2">elementoA 2</option>
<option value="EA3">elementoA 3</option>
</select>
<input type="button" value="para ir de A a B" onClick="javascript: QuitarElemento();">
<select multiple name="elementoListaB">
<option value="EB1">elementoB 1</option>
<option value="EB2">elementoB 2</option>
<option value="EB3">elementoB 3</option>
</select>
</form>
</body>
</html>
Espero haberte ayudado, creo que merezco una buena puntuación cuando esto termine jaja, pero, en serio, dime si es lo que querías que si no se hace otra función! ¿Vale?
Gracias por todo, funciona de pm. Ahora lo que me gustaría es poder hacer un submit con todos los elementos de una lista. Cuando hago el submit de una lista solo me envía el primero que esta seleccionado aunque tenga varios seleccionados. Sabes como enviar todos los elementos de una lista en un submit.
Gracias y evidentemente cuenta con el excelente.
Para recoger los datos de un select, primero tienes que ponerlo como "multiple" es una propiedad del select. Luego al recogerlo, lo que devuelve es un array, así que ya sabes, para tener todos los datos del array recorrelo con un un bucle y ya esta!

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas