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ó.
select
de la derecha?