Pasar elementos en select múltiple

anibalag85 · #1 (**permalink**) 17/09/2009, 06:01

Hola compañeros, tengo un problema con un select múltiple cuando paso elementos en javascript. Os pongo el código y escribo el problema:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title></title>

        <script language="javascript">

            function pasarOpcionesDerecha(form) {

                var combo1 = form.combo1.options;

                var combo2 = form.combo2.options;

                nuevaOpcion = new Option(combo1[combo1.selectedIndex].text,combo1[combo1.selectedIndex].value,"","");

                a = combo2.length;

                

                if (a==0) { 

                    i=0; 

                } else{ 

                    i=a; 

                }

                combo2[i] = nuevaOpcion;

                form.combo1.options[form.combo1.options.selectedIndex] = null;

            }

            

            function pasarOpcionesIzquierda(form) {

                var combo1 = form.combo1.options;

                var combo2 = form.combo2.options;

                nuevaOpcion = new Option(combo2[combo2.selectedIndex].text,combo2[combo2.selectedIndex].value,"","");

                a = combo1.length;

                

                if (a==0) { 

                    i=0; 

                } else{ 

                    i=a; 

                }

                combo1[i] = nuevaOpcion;

                form.combo2.options[form.combo2.options.selectedIndex] = null;

            }

        </script>

    </head>

    <body>

                <table style="margin-top:15px;">

                    <tr>

                          <form name="form">

                          <td>

 
                            <select name="combo1" multiple size=6>

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

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

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

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

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

                                <option value="6">Opcion 6</option>

                            </select>

                          </td>

                          <td>

                            <input type="button" value=" > " onClick="pasarOpcionesDerecha(this.form)"><br />

                            <input type="button" value=" < " onClick="pasarOpcionesIzquierda(this.form)">

                          </td>

                          <td>

                            <select name="combo2" multiple size=6></select>

                          </td>

                         </form>  

                        

                    </tr>

                   

                </table>

 
    </body>

</html>

Bien, esta página tiene dos select múltiples, uno con opciones y el otro no, yo puedo pasar las opciones desde el select 1 hasta el select 2 y viceversa, el problema es que solo puedo pasar de un elemento en un elemento, y yo quiero poder pasar varios elementos a la vez.

Podrían ayudarme a cambiar el código para pasar varios elementos.
Gracias

America|UNK · #2 (**permalink**) 17/09/2009, 14:14

Código javascript:

Ver originalfunction pasarOpciones(from,to){
    var _from = from.options;
    for (var i=0 ;i < _from.length; i++){
        var opt = _from[i];
        if(opt.selected){
            var n = document.createElement("option");
            n.value = opt.value;
            n.text = opt.text;
            n.selected = 1;
            
            try{ to.add(n,null); from.remove(i,null)
            }catch(e){  to.add(n); from.remove(i) }
            i--
        }
    }
}

Código HTML:

 <form>
                          <td>

                            <select name="combo1" multiple="" size="6">
                                <option value="1">Opcion 1</option>
                                <option value="2">Opcion 2</option>
                                <option value="3">Opcion 3</option>
                                <option value="4">Opcion 4</option>
                                <option value="5">Opcion 5</option>
                                <option value="6">Opcion 6</option>
                            </select>
                          </td>
                          <td>
                            <input type="button" value=" &gt; " onClick="pasarOpciones(combo1,combo2)"><br />
                            <input type="button" value=" &lt; " onClick="pasarOpciones(combo2,combo1)">
                          </td>
                          <td>
                            <select name="combo2" multiple="" size="6"></select>
                          </td>
                         </form>

anibalag85 · #3 (**permalink**) 18/09/2009, 02:10

Muchas gracias, es un aporte estupendo, y mucho mas reducido de como lo tenía yo. Karma para ti.