I have two selects, in which I move elements from one to the other, but I want to save how many times it has moved from one to the other through the value. I'm trying but every time it stays at 0. Example of the expected result: moved 2 time, then:
<option value="2">spain</option>
My code:
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>
That's because you only copy current value and never change it, you need to change the value before assign it to the new_option.value
new_option.value = ++selected_option.value;
One way to store and increment a movecount could be with a dataset.
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>Each time you create the new option, you are setting its value to equal the value of the selected item (which is 0). Instead you have to increment the old value to get the new value. Because, tag value attributes are strings, it's safest to first convert the value to a number (otherwise 0+1=01, 1+1=11, etc).
So this will fix your value:
new_option.value = parseInt(selected_option.value) +1;
The snippet below reports the value each time you move an option
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>