copiar valor de select a otro

venom_mau · #1 (**permalink**) 08/09/2010, 11:12

Buen día :)

Ahora tengo esta duda, es posible copiar valores de un select (o lista desplegable) a otra?

Es decir tengo esta lista:

Código PHP:

  echo "<td align='center'><select name='periodo' id='listper' onChange='igual_per();'>"; 
echo"<option value=''>Elige una Opci&oacute;n</option>"; 
 
//Generamos el menu desplegable 
while ($elementos=mysql_fetch_assoc($sel_periodos)) 
    { 
       echo "<option value='". $elementos['periodo']." '>".$elementos['periodo']."</option>"; 
    } 
echo "</select></td>";

En la cual obtengo valores de una base de datos, por medio de una función en javascript, quiero copiar el valor que elijan en esta en otra lista.

La función (pero creo que no funciona el getElementbyName :( ):

Código PHP:

  function igual_per(){ 
    var peranio=null; 
    var peranio=document.getElementsByName("periodo").defaultValue; 
    document.prof_asig_grupo.periodo.value=peranio; 
    document.prof_asig_grupo.periodo2.value=peranio; 
     
}

Aquí la otra lista:

Código PHP:

  echo "<td align='center'><select name='periodo2' id='listper'>"; 
echo"<option value=''>Elige una Opci&oacute;n</option>"; 
 
//Generamos el menu desplegable 
while ($elemento=mysql_fetch_assoc($sel_periodosd)) 
    { 
       echo "<option value='". $elemento['periodo']." '>".$elemento['periodo']."</option>"; 
    } 
echo "</select></td>";

O se tiene que hacer con ajax? Aunque prefiero hacer algo sencillo.

Si consideran los administradores que va en otro foro, con toda confianza pueden moverlo :)

Muchas gracias por su tiempo y respuestas :D

_cronos2 · #2 (**permalink**) 08/09/2010, 12:28

Con el método getElementsByName(), así como con el getElementsByTagName() y otros, se crea un array con todos los elementos que tienen dicho nombre. Por tanto, aunque sólo haya un elemento que se llame periodo en todo el documento, hay que referenciarlo según su posición en el array es decir, cambiar var peranio=document.getElementsByName("periodo").defa ultValue; por var peranio=document.getElementsByName("periodo")[0].defaultValue.
Saludos (:

Adler · #3 (**permalink**) 08/09/2010, 12:33

Hola

Prueba con esto

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Pasar elementos de una lista a otra</title>
<style type="text/css">
select {width:80px}
</style>
<script type="text/javascript">
<!--
function pasar1() {
    var obj = document.forms.prueba.sel1;
    if (obj.selectedIndex==-1) return;
  for (var i=0; opt=obj.options[i]; i++)
    if (opt.selected) {
        var valor=opt.value; // almacenar value
        var txt=obj.options[i].text; // almacenar el texto
        obj.options[i]=null; // borrar el item si está seleccionado
    var obj2 = document.forms.prueba.sel2;
    var opc = new Option(txt,valor);    
//alert(opc);
        eval(obj2.options[obj2.options.length]=opc);    
  } 
}
 
 
 
function pasar2() {
    var obj = document.forms.prueba.sel2;
    if (obj.selectedIndex==-1) return;
  for (var i=0; opt=obj.options[i]; i++)
    if (opt.selected) {
        var valor=opt.value; // almacenar value
        var txt=obj.options[i].text; // almacenar el texto
        obj.options[i]=null; // borrar el item si está seleccionado
    var obj2 = document.forms.prueba.sel1;
        var opc = new Option(txt,valor);
//alert(opc);
        eval(obj2.options[obj2.options.length]=opc);
  } 
}
 
 
 
function ini(){
    window["sel_opc"] = new Array();
    var dato = document.forms.prueba.sel1.options;
  for (var i = 0, total = dato.length; i < total; i ++)
    window["sel_opc"][i] = dato[i].selected;
    //alert(sel_opc);
}
 
function ctrMays(){
    var dato = document.forms.prueba.sel1.options;
   for (var i = 0, total = dato.length; i < total; i ++)
     if (dato[i].selected)
    sel_opc[i] = !sel_opc[i];
   for (var i = 0, total = dato.length; i < total; i ++)
    dato[i].selected = sel_opc[i];
    //alert(sel_opc);
}
-->
</script>
</head>
<body onload="ini()">
<table>
<tr>
<td>Origen</td>
<td></td>
<td>Destino</td>
</tr>
<tr>
<td>
<form name="prueba" >
<select name="sel1" id="sel1" multiple="multiple"  size="5">
<option value="3">Tres</option>
<option value="4">Cuatro</option>
<option value="5">Cinco</option>
</select>
</td>
<td>
<input type="button" value="Pasar >>" onclick="pasar1()" /><br />
<input type="button" value="Pasar <<" onclick="pasar2()" />
</td>
<td>
<select name="sel2" id="sel2" multiple="multiple" size="5">
<option value="1">Uno</option>
<option value="2">Dos</option>
</select>
</td>
</tr>
</table>
</body>
</html>

Suerte

venom_mau · #4 (**permalink**) 09/09/2010, 09:29

Intenté tu opción _cronos2 pero nada.

Usando las funciones:

Código PHP:

  function igual_per(){ 
 var obj = document.forms.prof_asig_grupo.periodo; 
* * if (obj.selectedIndex==-1) return; 
* for (var i=0; opt=obj.options[i]; i++) 
* * if (opt.selected) { 
* * * * var valor=opt.value; // almacenar value 
* * * * var txt=obj.options[i].text; // almacenar el texto 
* * * * obj.options[i]=null; // borrar el item si está seleccionado 
* * var obj2 = document.forms.prof_asig_grupo.periodo2; 
* * var opc = new Option(txt,valor);* *  
//alert(opc); 
* * * * eval(obj2.options[obj2.options.length]=opc);* *  
* }  
} 
 
function igual_per2(){ 
 
* * var obj = document.forms.prof_asig_grupo.periodo2; 
* * if (obj.selectedIndex==-1) return; 
* for (var i=0; opt=obj.options[i]; i++) 
* * if (opt.selected) { 
* * * * var valor=opt.value; // almacenar value 
* * * * var txt=obj.options[i].text; // almacenar el texto 
* * * * obj.options[i]=null; // borrar el item si está seleccionado 
* * var obj2 = document.forms.prof_asig_grupo.periodo; 
* * * * var opc = new Option(txt,valor); 
//alert(opc); 
* * * * eval(obj2.options[obj2.options.length]=opc); 
* }  
 
}

Y en mi formulario llamándolas con el evento onChange, logro que me copie los valores, pero lo curioso es que en el primer select, por ejemplo, selecciono "1", me lo pone en el segundo, pero su primera opción de éste que es Elige una opción, se elimina.

Luego selecciono "2", pasa lo mismo, pero ahora el elemento "1" aparece hasta abajo de las opciones del primer select.

Me explico? Por qué pasa esto?

venom_mau · #5 (**permalink**) 10/09/2010, 12:23

He modificado la funcion así:

Código PHP:

  * * var obj = document.forms.prof_asig_grupo.periodo; 
    var obj2 = document.forms.prof_asig_grupo.periodo2; 
//if (obj.selectedIndex==-1) return; 
    var dato=obj.selectedIndex; 
    //var per=obj.options[dato] 
for (var i=0; per=obj.options[i]; i++){ 
    if(per.selected){ 
      obj2.options[i]=per; 
     } 
}

Ahora logro que el valor que selecciono en la primer lista me lo pase a la segunda, pero la primera se queda sin valor

Alguna idea?

Adler · #6 (**permalink**) 10/09/2010, 12:53

Hola

Pero colega, comenta esta línea en ambas funciones

Cita:

obj.options[i]=null; // borrar el item si está seleccionado

Suerte

venom_mau · #7 (**permalink**) 13/09/2010, 12:41

Lo solucioné provisionalmente así:

Código PHP:

   
function igual_per(){ 
 
* * var obj = document.forms.prof_asig_grupo.periodo; 
    var obj2 = document.forms.prof_asig_grupo.periodo2; 
    var per=obj.options.length; 
      
  for (var i=0; i<=per; i++){ 
 
     
    if(obj.options[i].selected){ 
     
    var pasa=obj.selectedIndex; 
 
    obj2.selectedIndex=pasa; 
 
     } 
  } 
 
}

Quizá difiera un poco en el primer planteamiento que hice, pero me copia el elemento que selecciono en una primer lista en la segunda.

Saludos y gracias por las ideas y comentarios :)