Ayuda con Listas
Cordial saludo
Tengo dos select tipo Lista múltiple y cuatro botones para pasar, devolver, pasar todos o devolver todos los item de la lista.
En uno traigo los datos de una tabla(usuarios), cuando le doy click en un item de la lista y le doy click en el botón pasar me debe pasar ese item con el value y texto a la otra lista; si le doy click en un item de la otra lista y le doy click en el botón devolver debe pasar ese item a su posición original de la lista orginal; si le doy click en pasar todos me pasa todos los item a la nueva lista.
Lo he intentado pero solo me salen errores
Agradezco la ayuda y sugerencias que me pueda brindar.
Tengo dos select tipo Lista múltiple y cuatro botones para pasar, devolver, pasar todos o devolver todos los item de la lista.
En uno traigo los datos de una tabla(usuarios), cuando le doy click en un item de la lista y le doy click en el botón pasar me debe pasar ese item con el value y texto a la otra lista; si le doy click en un item de la otra lista y le doy click en el botón devolver debe pasar ese item a su posición original de la lista orginal; si le doy click en pasar todos me pasa todos los item a la nueva lista.
Lo he intentado pero solo me salen errores
Agradezco la ayuda y sugerencias que me pueda brindar.
2 Respuestas
Respuesta de pmrivas
1
Va Receta de cocina:
<script language="JavaScript" type="text/javascript">
<!--
function mover(tipo) {
if (tipo>1) {
lista2=document.getElementById('lista1');
lista1=document.getElementById('lista2');
tipo-=2;
} else {
lista1=document.getElementById('lista1');
lista2=document.getElementById('lista2');
}
switch(tipo) {
case 0:
cual=lista1.selectedIndex;
if (cual>=0) {
texto = lista1.options[cual].text;
valor = lista1.options[cual].value;
otra = new Option(texto, valor, false, false);
lista2.options[lista2.length]=otra;
lista1.remove(cual);
}
break;
case 1:
for (var i=0; lista1.options.length>0;) {
otra=new Option(lista1.options.text,lista1.options.value,false,false);
lista2.options[lista2.length]=otra;
lista1.remove(i);
}
break;
}
return false;
}
//-->
</script>
<form id="abm" name="abm" action="">
<table><tr><td valign="top"><select name="lista1" id="lista1" size="5"><option value="1">Juan<option value="2">Pedro<option value="3">Pablo</select><br>
<input type="button" name="pasar" onclick="mover(0);" id="Pasar" value="Pasar"><input type="button" onclick="mover(1);"name="todos" id="todos" value="Todos">
<td> <td valign="top"><select name="lista2" id="lista2" size="5"></select><br>
<input type="button" name="traer" onclick="mover(2);"id="traer" value="Traer"><input type="button" name="trtodos" onclick="mover(3);"id="trtodos" value="Todos">
</form>
Saludos.. Cualquier cosa que no entiendas, puedes continuar esta pregunta.
Suerte!
<script language="JavaScript" type="text/javascript">
<!--
function mover(tipo) {
if (tipo>1) {
lista2=document.getElementById('lista1');
lista1=document.getElementById('lista2');
tipo-=2;
} else {
lista1=document.getElementById('lista1');
lista2=document.getElementById('lista2');
}
switch(tipo) {
case 0:
cual=lista1.selectedIndex;
if (cual>=0) {
texto = lista1.options[cual].text;
valor = lista1.options[cual].value;
otra = new Option(texto, valor, false, false);
lista2.options[lista2.length]=otra;
lista1.remove(cual);
}
break;
case 1:
for (var i=0; lista1.options.length>0;) {
otra=new Option(lista1.options.text,lista1.options.value,false,false);
lista2.options[lista2.length]=otra;
lista1.remove(i);
}
break;
}
return false;
}
//-->
</script>
<form id="abm" name="abm" action="">
<table><tr><td valign="top"><select name="lista1" id="lista1" size="5"><option value="1">Juan<option value="2">Pedro<option value="3">Pablo</select><br>
<input type="button" name="pasar" onclick="mover(0);" id="Pasar" value="Pasar"><input type="button" onclick="mover(1);"name="todos" id="todos" value="Todos">
<td> <td valign="top"><select name="lista2" id="lista2" size="5"></select><br>
<input type="button" name="traer" onclick="mover(2);"id="traer" value="Traer"><input type="button" name="trtodos" onclick="mover(3);"id="trtodos" value="Todos">
</form>
Saludos.. Cualquier cosa que no entiendas, puedes continuar esta pregunta.
Suerte!
Genial!
Solo una pregunta, ¿no se puede organizar esa lista?
Siempre que devuelvo un item me lo manda al final.
Agradezco la ayuda que me has brindado.
Solo una pregunta, ¿no se puede organizar esa lista?
Siempre que devuelvo un item me lo manda al final.
Agradezco la ayuda que me has brindado.
Solo tienes que agregar en la función mover antes del "return false" lo siguiente:
Clasifica(lista2);
y crear la funcion clasifica:
function Clasifica(obj) {
var o = new Array();
if (obj==null || obj.options==null) return false;
for (var i=0; i<obj.options.length; i++) {
o[o.length] = new Option( obj.options.text, obj.options.value, obj.options.defaultSelected, obj.options.selected) ;
}
if (o.length==0) { return; }
o = o.sort(
function(a,b) {
if ((a.text+"") < (b.text+"")) { return -1; }
if ((a.text+"") > (b.text+"")) { return 1; }
return 0;
}
);
for (var i=0; i<o.length; i++) {
obj.options = new Option(o.text, o.value, o.defaultSelected, o.selected);
}
}
Esta función ordena la lista que le pases.
Nota: Esto esta basado en:
http://www.mattkruse.com/javascript/selectbox/source.html
Clasifica(lista2);
y crear la funcion clasifica:
function Clasifica(obj) {
var o = new Array();
if (obj==null || obj.options==null) return false;
for (var i=0; i<obj.options.length; i++) {
o[o.length] = new Option( obj.options.text, obj.options.value, obj.options.defaultSelected, obj.options.selected) ;
}
if (o.length==0) { return; }
o = o.sort(
function(a,b) {
if ((a.text+"") < (b.text+"")) { return -1; }
if ((a.text+"") > (b.text+"")) { return 1; }
return 0;
}
);
for (var i=0; i<o.length; i++) {
obj.options = new Option(o.text, o.value, o.defaultSelected, o.selected);
}
}
Esta función ordena la lista que le pases.
Nota: Esto esta basado en:
http://www.mattkruse.com/javascript/selectbox/source.html
Respuesta de mangelgarcia
1
Perdón por el retraso, pero he estado de vacaciones.
Si no has resuelto todavía tu duda, puedes enviar el código que estas utilizando para ver que es lo que quieres realizar.
Si no has resuelto todavía tu duda, puedes enviar el código que estas utilizando para ver que es lo que quieres realizar.