0

Requiero mover un elemento (en este caso una lista de opciones): moverlo uno por uno por 3 select sucesivamente. Este movimiento debe hacerlo con un solo botón; al seleccionar mueve al primer select pero ya no al segundo y al tercero.

Dejo la función:

o=document.getElementById("origen");
d=document.getElementById("destino");
c=document.getElementById("destino1");
i=document.getElementById("destino2");
 
function moverDerecha(type) {
    Array.from(type == "selected" ? o.selectedOptions : o.options).forEach(el => {
        d.options.add(el);
    });
    ordenar(d);

if(Array=Array_b) {
    Array_b.from(type == "selected" ? d.selectedOptions : d.options).forEach(el => {
        c.options.add(el);
    });
    ordenar(c);
}
}
function ordenar(select) {
    Array.from(select.options).sort((a,b) => a.text.toLowerCase() > b.text.toLowerCase() ? 1: -1).forEach(el => select.add(el))
}
body>div {
        float:left;
        margin-right: 20px;
        height:200px;
    }
    body>div:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    input[type=button] {width:40px;}
    select {
        height:200px;
        width:100px;
<!--código HTML, coloqué los select con diferente id para poder marcar el destino-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
 
<body>
 
    <div>
        <select id="origen" multiple>
            <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>
            <option value="7">opcion 7</option>
        </select>
    </div>
    <div>
        <div>
            <input type="button" onclick="moverDerecha('selected')"value=">">
        </div>
    </div>
    <div>
        <select id="destino" multiple>
        </select>
    </div>
    <div>
        <select id="destino1" multiple>
        </select>
    </div>
    <div>
        <select id="destino2" multiple>
        </select>
    </div>
</body>
</html>

Intenté añadir una función para realizar el movimiento de los elementos a los diferentes select: no resultó.

3
  • Hola, puedes revisar el siguiente ENLACE y chequear si es lo que realmente esperas, es algo básico puesto que la acción queda almacenada en un arreglo dependiendo de la opción que hayas seleccionado, lo demás sería pintar los datos de cada arreglo en el select correspondiente. Si requieres algo más por favor sé más específico
    – jecorrales
    Commented el 12 jul. 2022 a las 19:15
  • No comprendo, quieres agregar las mismas opciones seleccionadas a los tres select de la derecha?
    – don_aman
    Commented el 12 jul. 2022 a las 19:34
  • si agregar la misma opción, ejemplo Opción 1 lo selecciones y lo puedas mover a un select uno por uno. Commented el 12 jul. 2022 a las 20:56

3 respuestas 3

2

aquí esta mi solución. puede cambiar multiples option de los selects, junte todo en un archivo para colocar todo junto, Saludos.

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
 
<body>
 
    <div>
        <select id="origen" multiple>
            <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>
            <option value="7">opcion 7</option>
        </select>
    </div>
    <div>
        <div>
            <input type="button" onclick="moverDerecha()"value=">">
        </div>
    </div>
    <div>
        <select id="destino" multiple>
        </select>
    </div>
    <div>
        <select id="destino1" multiple>
        </select>
    </div>
    <div>
        <select id="destino2" multiple>
        </select>
    </div>


    <style type="text/css">
        body>div {
            float:left;
            margin-right: 20px;
            height:200px;
        }
        body>div:nth-child(2) {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        input[type=button] {width:40px;}
        select {
            height:200px;
            width:100px;
            user-select: none;
        }
    </style>
    <script type="text/javascript">
        

Las variables en las que obtienen los selects marcaban error en los fors asi que los renombre.

        function moverDerecha(){
            origen=document.getElementById("origen");
            destino1=document.getElementById("destino");
            destino2=document.getElementById("destino1");
            destino3=document.getElementById("destino2");

Aquí pensé en mover múltiples options ya que se pueden seleccionar uno por cada select, select tiene un atributo multiple y si no esta puesto lo toma como que solo se pueda seleccionar un option por select. Aquí puedes leer sobre eso: https://developer.mozilla.org/es/docs/Web/HTML/Element/select

            //obtener los selects que tienen un option seleccionado para mover multiples options
            let selects = []

            if (origen.selectedOptions[0] != undefined) {
                selects.push('1')
            }
            if (destino1.selectedOptions[0] != undefined) {
                selects.push('2')
            }
            if (destino2.selectedOptions[0] != undefined) {
                selects.push('3')
            }
            if (destino3.selectedOptions[0] != undefined) {
                selects.push('4')
            }

Ya teniendo los selects ubicados en un arreglo lo recorro con un for y dependiendo del select entra a un caso u otro

            for (var i = selects.length - 1; i >= 0; i--) {
                switch(selects[i]){
                    case '1':

utilice appendChild para mover el option a otro select, aqui puedes aprender mas sobre como funciona este metodo: https://developer.mozilla.org/es/docs/Web/API/Node/appendChild

                        destino1.appendChild(origen.selectedOptions[0]);
                    break;
                    case '2':
                        destino2.appendChild(destino1.selectedOptions[0]);
                    break;
                    case '3':
                        destino3.appendChild(destino2.selectedOptions[0]);
                    break;
                    case '4':
                        alert('No puedes mover mas a la derecha el option:  '+destino3.options[destino3.selectedIndex].text)
                    break;
                }
            }
            

Cada vez que movía un option se quedaba seleccionado asi que recorro todos los selects con for y los seteo a que no queden seleccionados y de paso los ordeno con el método que tenías, aunque este código siguiente creo que es mejor que este en los case del switch.

            //ordenar los options y deseleccionarlos
            for (var i = origen.length - 1; i >= 0; i--) {
                origen.value="";
                Array.from(origen.options).sort((a,b) => a.text.toLowerCase() > 
                    b.text.toLowerCase() ? 1: -1).forEach(el => origen.add(el))
            }
            for (var i = destino1.length - 1; i >= 0; i--) {
                destino1.value="";
                Array.from(destino1.options).sort((a,b) => a.text.toLowerCase() > 
                    b.text.toLowerCase() ? 1: -1).forEach(el => destino1.add(el))
            }
            for (var i = destino2.length - 1; i >= 0; i--) {
                destino2.value="";
                Array.from(destino2.options).sort((a,b) => a.text.toLowerCase() > 
                    b.text.toLowerCase() ? 1: -1).forEach(el => destino2.add(el))
            }
            for (var i = destino3.length - 1; i >= 0; i--) {
                destino3.value="";
                Array.from(destino3.options).sort((a,b) => a.text.toLowerCase() > 
                    b.text.toLowerCase() ? 1: -1).forEach(el => destino3.add(el))
            }
        }
    </script>


</body>
</html>
4
  • Este ultimo código, como lo implementaste al que ya tenia, lo intente implementar pero no mueve la opción seleccionada. Muchas gracias de verdad me diste una gran respuesta, ** En el caso del switch me agrado la solución pero se quedan seleccionadas las opciones en este mismo caso se puede hacer q al cambiarlo no quede seleccionado ** Commented el 13 jul. 2022 a las 13:05
  • ok te paso un enlace de code pen para que veas como queda todo, el css esta dentro del html en la etiqueta <style type="text/css"></style>, asi mismo el js esta dentro de la etiqueta <script type="text/javascript"></script>. codepen.io/pen?template=RwMGqOg
    – Uriel RDZ
    Commented el 13 jul. 2022 a las 13:41
  • a si lo implemente y no obtuve resultados, lo revisare para ver los errores, nuevamente gracias, en lo personal y disculpa la indiscreción das asesoras? q me mandes tu correo. Commented el 13 jul. 2022 a las 13:55
  • mi correo es [email protected] se una que otra cosa de html, css y js, puedo hacer una página web y todo pero no creo tener un nivel muy alto como para dar asesoría pero tu pregunta igualmente, en caso de que sea java o python ahi si te puedo ayudar mas. Saludos.
    – Uriel RDZ
    Commented el 13 jul. 2022 a las 14:06
2

Una opción dentro de un select es un elemento option, y como elemento, y también nodo, solo puede pertenecer a una única posición dentro de un único documento, es decir, si quieres agregar la misma opción varias veces se tendría que duplicar, más fácilmente con la función cloneNode.

<input type="button" onclick="moverDerecha(true)" value="&gt;">
function ordenar(select) {
    const opts = Array.from(select.options);
    // usar "".localeCompare
    opts.sort((a, b) => a.text.localeCompare(b.text));
    opts.forEach(opt => select.add(opt));
}

function moverDerecha(selectedOnly) {
    const opts = Array.from(selectedOnly ? o.selectedOptions : o.options);
    const selectElements = [d, c, i];

    opts.forEach(opt => {
        selectElements.forEach(sel => sel.add(opt.cloneNode()));
        // eliminar de o
        opt.remove();
    ]);

    selectElements.forEach(sel => ordenar(sel));
}
0

**Hacer esto ejemplo de el recorrido de un elemento por cada select existente, pero con un solo botón **

o=document.getElementById("origen");
d=document.getElementById("destino");
c=document.getElementById("destino1");
i=document.getElementById("destino2");
 
function moverDerecha(type) {
    Array.from(type == "selected" ? o.selectedOptions : o.options).forEach(el => {
        d.options.add(el);
    });
    ordenar(d);
}
function moverDerecha1(type) {
    Array.from(type == "selected" ? d.selectedOptions : d.options).forEach(el => {
        c.options.add(el);
    });
    ordenar(c);
}
function moverDerecha2(type) {
    Array.from(type == "selected" ? c.selectedOptions : c.options).forEach(el => {
        i.options.add(el);
    });
    ordenar(i);
}

function ordenar(select) {
    Array.from(select.options).sort((a,b) => a.text.toLowerCase() > b.text.toLowerCase() ? 1: -1).forEach(el => select.add(el))
}
 body>div {
        float:left;
        margin-right: 20px;
        height:200px;
    }
    body>div:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    input[type=button] {width:30px;}
    select {
        height:200px;
        width:100px;
    }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
 
<body>
 
    <div>
        <select id="origen" multiple>
            <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>
            <option value="7">opcion 7</option>
        </select>
    </div>
    <div>
        <div>
            <input type="button" onclick="moverDerecha('selected')"value=">">
        </div>
    </div>
    <div>
        <select id="destino" multiple></select>
    </div>
    <div>
        <input type="button" onclick="moverDerecha1('selected')"value=">">
    </div>
    <div>
        <select id="destino1" multiple></select>
    </div>
    <div>
        <input type="button" onclick="moverDerecha2('selected')"value=">">
    </div>
    <div>
        <select id="destino2" multiple></select>
    </div>
</body>
</html>

1
  • Esta respuesta es una solución a tu pregunta? Si no, debes eliminar esta entrada y editar tu pregunta original para añadir info adicional Commented el 12 jul. 2022 a las 21:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.