pasar parametros de un select a otro select

edu007ar · #1 (**permalink**) 17/06/2005, 08:26

Hace un tiempo me pareció ver un ejemplo (que en su momento no lo agendé y ahora lo necesito) de un javascript que permitía lo siguiente:

Teniendo dos campos select (tipo lista), se presionaba un botón que decía por ejemplo "Pasar" y pasaba el elemento seleccionado del select1 al select2 y a su vez lo quitaba del select1.... y otro botón que pasaba del select2 al select1........ y si mal no recuerdo también tenía la opción que permitía cambiar el orden de los elementos dentro del select2, mediante botones del tipo "Arriba" y "Abajo"........

En fin, si alguien sabe de algo así por favor.. lo estoy necesitando para un sitio...

Gracias desde ya....

JavierB · #2 (**permalink**) 17/06/2005, 09:22

Hola edu007ar

Te pongo estos códigos pero por separado. El primero para pasar elementos de una lista a otra:

Código PHP:

  <html>

<head>

<script type="text/javascript">

function pasar() {

    obj=document.getElementById('sel1');

    if (obj.selectedIndex==-1) return;

    valor=obj.value;

    txt=obj.options[obj.selectedIndex].text;

    obj.options[obj.selectedIndex]=null;

    obj2=document.getElementById('sel2');

    opc = new Option(txt,valor);

    eval(obj2.options[obj2.options.length]=opc);    

}

</script>

</head>

 
<body>

<select id="sel1" size="5">

<option value="1">Uno</option>

<option value="2">Dos</option>

<option value="3">Tres</option>

<option value="4">Cuatro</option>

<option value="5">Cinco</option>

</select>

<input type="button" value="Pasar" onClick="pasar()">

<select id="sel2" size="5">

</select>

</body>

</html>

El segundo para mover elementos:

Código PHP:

  <html>

<head>

<script type="text/javascript">

function arriba() {

    obj=document.getElementById('sel');

    indice=obj.selectedIndex;

    if (indice>0) cambiar(obj,indice,indice-1);

}

function abajo() {

    obj=document.getElementById('sel');

    indice=obj.selectedIndex;

    if (indice!=-1 && indice<obj.length-1)

        cambiar(obj,indice,indice+1);

}

function cambiar(obj,num1,num2) {

    proVal=obj.options[num1].value;

    proTex=obj.options[num1].text;

    obj.options[num1].value=obj.options[num2].value;    

    obj.options[num1].text=obj.options[num2].text;    

    obj.options[num2].value=proVal;

    obj.options[num2].text=proTex;

}

</script>

</head>

 
<body bgcolor="#FFFFFF" text="#000000">

<select id="sel" size="5">

<option value="1">Uno</option>

<option value="2">Dos</option>

<option value="3">Tres</option>

<option value="4">Cuatro</option>

<option value="5">Cinco</option>

</select>

<input type="button" value="Arriba" onClick="arriba()">

<input type="button" value="Abajo" onClick="abajo()">

</body>

</html>

Espero que te sirva. Saludos,

edu007ar · #3 (**permalink**) 17/06/2005, 10:13

Gracias! voy a ver de adaptarlo a lo que necesito... igualmente si alguien más tiene alguna otra idea bienvenida sea....

Saludos.

Blid · #4 (**permalink**) 29/06/2005, 04:56

Yo he seguido estos pasos, que creo parecen mucho más limpios y compresibles. Y con menos complicación y código.

Código PHP:

  <script type="text/javascript">

function volcarSelects(emisor, receptor){

    

    // Accedemos a los 2 selects

    emisor = document.getElementById(emisor);

    receptor = document.getElementById(receptor);

    

    // Obtenemos algunos datos necesarios

    posicion = receptor.options.length;

    selecionado = emisor.selectedIndex;

    

    if(selecionado != -1) {

 
        volcado = emisor.options[selecionado];

        

        // Volcamos la opcion al select receptor y lo eliminamos del emisor

        receptor.options[posicion] = new Option(volcado.text, volcado.value);

        emisor.options[selecionado] = null;

 
    }

    

}

</script>

Y aplicado sobre XHTML seria de la siguiente forma:

<select id="primero" style="width: 200px; height: 100px;" name="primero" multiple="multiple">
<option value="1">Noticias</option>
<option value="2">Inmuebles</option>
<option value="3">Herramientas</option>
<option value="4">Correos</option>
<option value="5">Usuarios</option>
<option value="6">Configuración</option>
</select>


<input type="button" value="→" onclick="volcarSelects('primero', 'segundo');" />


<input type="button" value="←" onclick="volcarSelects('segundo', 'primero');" />

<select style="width: 200px; height: 100px;" id="segundo" name="segundo" multiple="multiple">
</select>

Espero que os sirva :)

edu007ar · #5 (**permalink**) 29/06/2005, 10:07

Gracias, este ejemplo también me sirvio muchisimo, fijense que le he agregado un par de líneas en el script que hacen que se mantenga seleccionado el elemento del emisor para hacer el pasaje de elementos más dinámico y rápido.....

gracias por la ayuda...

Cita:

Iniciado por Blid

Yo he seguido estos pasos, que creo parecen mucho más limpios y compresibles. Y con menos complicación y código.

<script type="text/javascript">
function volcarSelects(emisor, receptor){

// Accedemos a los 2 selects
emisor = document.getElementById(emisor);
receptor = document.getElementById(receptor);

// Obtenemos algunos datos necesarios
posicion = receptor.options.length;
selecionado = emisor.selectedIndex;

if(selecionado != -1) {

volcado = emisor.options[selecionado];

// Volcamos la opcion al select receptor y lo eliminamos del emisor
receptor.options[posicion] = new Option(volcado.text, volcado.value);
emisor.options[selecionado] = null;
emisor.selectedIndex=selecionado;
if(selecionado>emisor.length-1){emisor.selectedIndex=emisor.length-1;}

}

}
</script>

Y aplicado sobre XHTML seria de la siguiente forma:

<select id="primero" style="width: 200px; height: 100px;" name="primero" multiple="multiple">
<option value="1">Noticias</option>
<option value="2">Inmuebles</option>
<option value="3">Herramientas</option>
<option value="4">Correos</option>
<option value="5">Usuarios</option>
<option value="6">Configuración</option>
</select>


<input type="button" value="→" onclick="volcarSelects('primero', 'segundo');" />


<input type="button" value="←" onclick="volcarSelects('segundo', 'primero');" />

<select style="width: 200px; height: 100px;" id="segundo" name="segundo" multiple="multiple">
</select>

Espero que os sirva :)

leophp · #6 (**permalink**) 16/04/2006, 13:17

Alguien tiene una funcion para mover todos los elemetos de un select a otro ?

aupaneu · #7 (**permalink**) 20/04/2006, 05:44

Gracias por vuestra rápida respuesta!

bitshoot · #8 (**permalink**) 10/05/2006, 11:54

Maestros se les agradese un monton tambien necesitaba esta funcion, pero tengo otro boton k manda los datos a otra pagina... como tomo los datos, si por ejemplo seleccion 4 opciones y necesito hacer operaciones a cada una de esas opciones por separado???

Reynier · #9 (**permalink**) 01/06/2006, 20:21

Muy bueno el script y de hecho lo estoy usando en mi aplicación pero además de esa funcionalidad que tiene necesito añadirles dos más y necesito ayuda de los expertos en el tema porque lo mió es más PHP. Las funcionalidades son:
1) Mover los X elementos seleccionados de un SELECT al otro: desde que los SELECT son multiples puedo seleccionar mas de un elemento a la vez, lo que quiero dar es la posibilidad de que me puedan mover a la vez, 1, 2, 3 o X

2) Ordenar los elementos de la lista resultante, lo que queda traducido de la siguiente forma: si muevo del SELECT1 al SELECT2 entonces en SELECT2 deben quedar las cosas ordenadas, si es a la inversa deben quedar en SELECT1 ordenadas.

Espero por la ayuda de Uds.
Salu2

gerazmv · #10 (**permalink**) 06/02/2009, 11:40

Cita:

Iniciado por edu007ar

Gracias, este ejemplo también me sirvio muchisimo, fijense que le he agregado un par de líneas en el script que hacen que se mantenga seleccionado el elemento del emisor para hacer el pasaje de elementos más dinámico y rápido.....

gracias por la ayuda...

Estoy un poco trancado.

El script funciona de maravilla. pero los datos por Post del segundo select no me estan llegando estoy probando con firebug pero no detecto el error. los datos si quedan en el value correctamente pero no pasan por POST

yoza · #11 (**permalink**) 20/05/2009, 11:06

Hola a mi me pasa lo mismo ... los valores pasan perfectamente del select de la izquierda al de la derecha ...

el problema es que no pasan por el post a la pagina que se encargara de guardarlos en el mysql ...

alguna idea ??

gracias

jasv · #12 (**permalink**) 10/06/2009, 12:47

mmm hola... me pasa lo mismo...
el problema es que los valores como no están seleccionados en ninguno de los select no pasan por el post. Hay alguna forma de que pasen sin necesidad de tener que seleccionarlos?
u otra solución... .gracias.

quebien · #13 (**permalink**) 10/06/2009, 16:12

Les comento para los que no saben que ahora es muy comun utilizar frameworks JS que solucionan y simplifican muchos de esos problemas:

Cita:

Últimamente los frameworks de Javascript que aparecen son cada vez más numerosos, y aunque ya en alguna ocasión hemos hablado de esto, no está mal recordar y añadir otros puntos por los que deberíamos usar estas librerías o frameworks.

* No reinventes la rueda: no pierdas en tiempo en hacer algo que ya han hecho otros y que además dan buen resultado.
* Haz más con menos código: estas librerías suelen permitir encadenar código, por lo que con menos código se consigue menos espacio, mejor mantenimiento y menos tiempo de desarrollo.
* Ahorra tiempo: por mucho que te guste programar en Javascript, ahorrarás tiempo al realizarlo mediante estas librerías.
* No eres el mejor programador: por mucho que tu ego te diga que eres bueno, los hay mejores. Además, estas librerías suelen estar apoyadas por una comunidad que hace mejorar el trabajo.
* Velocidad: estas librerías suelen ser muy rápidas a la hora de realizar las acciones. Visita esta página para comprobarlo.
* El código se entiende mejor: el código base de Javascript puede ser más complicado de leer y entender.

Fuente: http://sentidoweb.com/2007/09/06/6-r...javascript.php

Aca les dejo algunos:

http://mootools.net/ (el que uso yo)
http://jquery.com/
http://www.prototypejs.org/
http://developer.yahoo.com/yui/
http://www.dojotoolkit.org/
http://extjs.com/

bueno y hay más!