count元素在两个select之间移动

Question

我有两个选择，在这两个选择中，我将元素从一个移动到另一个，但我想保存它通过值从一个移到另一个中的次数。我正在尝试，但每次都保持在0。预期结果示例：移动2次，然后：

<option value="2">spain</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 = 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()">&gt;&gt;</button>
<button type="button" onclick="move2()">&lt;&lt;</button>   
<select id="select2">
</select>

Answer 1

这是因为您只复制当前值，而从不更改它，您需要在将其分配给new_option.value 之前更改该值

new_option.value = ++selected_option.value;

Answer 2

存储和增加movecount的一种方法可以是使用数据集。

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')">&gt;&gt;</button>
<button type="button" onclick="move('select2', 'select1')">&lt;&lt;</button>
<select id="select2">
</select>

Answer 3

每次创建新选项时，都会将其值设置为等于所选项目的值(即0(。相反，您必须增加旧值才能获得新值。因为标记值属性是字符串，所以最安全的做法是首先将值转换为数字(否则为0+1=01、1+1=11等(。

因此，这将修复您的价值：

new_option.value = parseInt(selected_option.value) +1;

下面的代码段报告每次移动选项时的值

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()">&gt;&gt;</button>
<button type="button" onclick="move2()">&lt;&lt;</button>   
<select id="select2">
</select>