Tengo dos selecciones, en las que muevo elementos de uno a otro, pero quiero guardar cuántas veces se ha movido de uno a otro a través del valor. Lo intento, pero siempre se queda en 0. Ejemplo del resultado esperado: movido 2 veces, luego:
<option value="2">spain</option>Mi código:
function move1() { var select_1 = document.getElementById("select1"); var select_2 = document.getElementById("select2"); var selected_option = select_1.options[select_1.selectedIndex]; var new_option = document.createElement('option'); new_option.value = selected_option.value new_option.innerHTML = selected_option.innerHTML; select_2.add(new_option); select_1.options.remove(select_1.selectedIndex); } function move2() { var select_1 = document.getElementById("select1"); var select_2 = document.getElementById("select2"); var selected_option = select_2.options[select_2.selectedIndex]; var new_option = document.createElement('option'); new_option.value = selected_option.value new_option.innerHTML = selected_option.innerHTML; select_1.add(new_option); select_2.options.remove(select_2.selectedIndex); } <select id="select1"> <option value="0">spain</option> <option value="0">France</option> <option value="0">Germany</option> </select> <button type="button" onclick="move1()">>></button> <button type="button" onclick="move2()"><<</button> <select id="select2"> </select>Eso es porque solo copia el valor actual y nunca lo cambia, necesita cambiar el valor antes de asignarlo a new_option.value
new_option.value = ++selected_option.value;Una forma de almacenar e incrementar un movecount podría ser con un conjunto de datos .
function move(selectID, destinationID) { const select = document.getElementById(selectID); const destination = document.getElementById(destinationID); const selected_option = select.options[select.selectedIndex]; let currentMoveCount = parseInt(selected_option.dataset.movecount) const new_option = document.createElement('option'); new_option.value = selected_option.value new_option.innerHTML = selected_option.innerHTML; new_option.dataset.movecount = ++currentMoveCount destination.add(new_option); select.options.remove(select.selectedIndex); log() } function log() { const options = document.querySelectorAll('option') options.forEach((el) => console.log(el.innerText, el.dataset.movecount)); } <select id="select1"> <option data-movecount="0">spain</option> <option data-movecount="0">France</option> <option data-movecount="0">Germany</option> </select> <button type="button" onclick="move('select1', 'select2')">>></button> <button type="button" onclick="move('select2', 'select1')"><<</button> <select id="select2"> </select>Cada vez que crea la nueva opción, está configurando su valor para que sea igual al valor del elemento seleccionado (que es 0). En su lugar, debe incrementar el valor anterior para obtener el nuevo valor. Debido a que los atributos de valor de etiqueta son cadenas, lo más seguro es convertir primero el valor en un número (de lo contrario, 0+1=01, 1+1=11, etc.).
Entonces esto arreglará su valor:
new_option.value = parseInt(selected_option.value) +1;
El fragmento a continuación informa el valor cada vez que mueve una opción
function move1() { var select_1 = document.getElementById("select1"); var select_2 = document.getElementById("select2"); var selected_option = select_1.options[select_1.selectedIndex]; var new_option = document.createElement('option'); new_option.value = parseInt(selected_option.value) +1; console.log(`${selected_option.innerText} value: ${new_option.value}`); new_option.innerHTML = selected_option.innerHTML; select_2.add(new_option); select_1.options.remove(select_1.selectedIndex); } function move2() { var select_1 = document.getElementById("select1"); var select_2 = document.getElementById("select2"); var selected_option = select_2.options[select_2.selectedIndex]; var new_option = document.createElement('option'); new_option.value = parseInt(selected_option.value) +1; console.log(`${selected_option.innerText} value ${new_option.value}`); new_option.innerHTML = selected_option.innerHTML; select_1.add(new_option); select_2.options.remove(select_2.selectedIndex); } <select id="select1"> <option value="0">spain</option> <option value="0">France</option> <option value="0">Germany</option> </select> <button type="button" onclick="move1()">>></button> <button type="button" onclick="move2()"><<</button> <select id="select2"> </select>