interacmbio de datos select multiple

jorgedx · #1 (**permalink**) 22/02/2008, 14:47

Hola, estoy trabajando con selects multiples y tengo este codigo de javierb

Código:

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);
}

funciona a la perfeccion y hice otra funcion para volver a su posicion los elementos que ya habia sacado de un select, pero ahora necesito vaciar el obj2 con una funcion y que los valores pasen al obj1

Agradeceria su ayuda, gracias.

JavierB · #2 (**permalink**) 22/02/2008, 15:36

Hola jorgedx

No se si te habré entendido bien

Prueba esto:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function pasar() {
  obj = document.getElementById('sel1');
  num = obj.options.length;
  for (i=num-1; i>=0; i--) {
    txt=obj.options[i].text;
    valor=obj.options[i].value;
    obj.options[i]=null;
    obj2=document.getElementById('sel2');
    opc = new Option(txt,valor);
    eval(obj2.options[i]=opc);
  }  
}
</script>
</head>
<body>
<select id="sel1" size="5" multiple="multiple">
<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>
<select id="sel2" size="5">
</select>
<input type="button" onclick="pasar()" />
</body>
</html>

Saludos,

jorgedx · #3 (**permalink**) 22/02/2008, 16:39

si eso es, lo modifique por que es vaciar el obj2 y vacia el segundo select pero cuando saco algunos sobrepone los anteriores

en esta direccion esta el ejemplo

JavierB · #4 (**permalink**) 23/02/2008, 04:10

Hola de nuevo.

Lo que ocurre es que en mi ejemplo, mandaba los elementos a un select vacío. Tu caso es un poco distinto.

Cambia esta línea: eval(obj2.options[i]=opc);

por esta otra: eval(obj.options[obj.options.length]=opc);

Saludos,

jorgedx · #5 (**permalink**) 23/02/2008, 09:10

muchas gracias ha quedado exelente, aca dejo el codigo

Código HTML:

<html>
<head>
<script type="text/javascript">
function insertar() {
    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);
}
function eliminar(){
    obj2=document.getElementById('sel2');
    if (obj2.selectedIndex==-1) return;
    valor=obj2.value;
    txt=obj2.options[obj2.selectedIndex].text;
    obj2.options[obj2.selectedIndex]=null;
    obj1=document.getElementById('sel1');
    opc = new Option(txt,valor);
    eval(obj1.options[obj1.options.length]=opc);
}
function vaciar() {
  obj2 = document.getElementById('sel2');
  num = obj2.options.length;
  for (i=num-1; i>=0; i--) {
    txt=obj2.options[i].text;
    valor=obj2.options[i].value;
    obj2.options[i]=null;
    obj=document.getElementById('sel1');
    opc = new Option(txt,valor);
    eval(obj.options[obj.options.length]=opc);
  }
}
</script>
</head>
<body>
<?php
        $myTextArea=$_POST['myTextArea'];
        echo "<hr noshade>";
        echo $myTextArea;
        $ok=1;
?>
        <hr noshade><br><br><form action="go.php" method="post">
            <center>Tema del mensaje (subject):
            <input type="text" name="subjet" size="25"><br><br><br>
            <input type="hidden" name="myTextArea" value="<?echo $myTextArea?>">

    <table border="1">
      <tr>
        <td rowspan="3"><select id="sel1" size="10" style="width:150;" multiple>
           <option value="0">0</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>

          </select></td>
        <td><div align="center">
            <input name="button" type="button" onClick="insertar()" value="Incluir >">
          </div></td>
        <td rowspan="3"><select name="select" size="10" multiple id="sel2" style="width:150;">
          </select></td>
      </tr>
      <tr>
        <td><div align="center">
            <input name="button" type="button" onClick="eliminar()" value="< Sacar">
          </div></td>
      </tr>
      <tr>
        <td><div align="center"><input name="button" type="button" onClick="vaciar()" value=" << Vaciar"></div></td>
      </tr>
      <tr>
        <td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input name="submit" type="submit" value="Confirmar y enviar"></td>
        <td>&nbsp;</td>
      </tr>
    </table>

</center></form>
</body>
</html>

Saludos y gracias nuevamente.