Hice dos selecciones y cuando presiono una selección, quiero que los datos se transfieran a la otra y se eliminen de la original. y viceversa en un momento se me borra el valor 1 y solo quedan 2
Aquí está el código que probé ¿Es un problema mío o es solo un error normal?
const insertList = (list) => { if (list === 1) { let selectOne = document.getElementById("list_one"); let selectTwo = document.getElementById("list_two"); let option = document.createElement("option"); console.log(selectOne.value) option.text = selectOne.value; selectTwo.add(option); selectOne.remove(option); } else if (list === 2) { let selectTwo = document.getElementById("list_two"); let selectOne = document.getElementById("list_one"); let option = document.createElement("option"); console.log(selectTwo.value) option.text = selectTwo.value; selectOne.add(option); selectTwo.remove(option); } } document.getElementById('list_one').ondblclick = () => { insertList(1); }; document.getElementById('list_two').ondblclick = () => { insertList(2); }; <label for="list_one">List 1</label> <select name="list_one" id="list_one" multiple size="3"> <option value="1">1</option> </select> <br><br> <label for="list_two">List 2</label> <select name="list_two" id="list_two" multiple size="3"> <option value="2">2</option> </select> document.getElementById("container").addEventListener("dblclick", function(e) { const tgt = e.target.closest("label"); if (!tgt) return; // we did not click a select let option = document.createElement("option"); const listA = tgt.querySelector("select"); // clicked select const sibling = tgt.nextElementSibling || tgt.previousElementSibling; // the other sibling const listB = sibling.querySelector("select"); option.textContent = listA.options[listA.selectedIndex].textContent; // get the text option.value = listA.value; // get the value option.selected=true; // set the option to selected to focus it when copying listB.add(option); listA.remove(option); }) label { margin-bottom: 5px; display: block } select { width:50px} <div id="container"> <label>List 1 <select name="list_one" id="list_one" multiple size="3"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </label> <label>List 2 <select name="list_two" id="list_two" multiple size="3"> <option value="4">Four</option> <option value="5">Five</option> <option value="6">Six</option> </select> </label> </div>