帮我写一个JS原生实现穿梭框能够左右来回穿梭无bug
时间: 2023-07-07 11:29:59 浏览: 123
好的,下面是一个完整的JS原生实现穿梭框能够左右来回穿梭无bug的代码:
HTML部分:
```
<div>
<select id="left" multiple>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
</select>
<button id="leftToRight">></button>
<button id="rightToLeft"><</button>
<select id="right" multiple>
</select>
</div>
```
JS部分:
```
var leftSelect = document.getElementById("left");
var rightSelect = document.getElementById("right");
var leftToRightBtn = document.getElementById("leftToRight");
var rightToLeftBtn = document.getElementById("rightToLeft");
leftToRightBtn.addEventListener("click", function() {
for (var i = 0; i < leftSelect.options.length; i++) {
var option = leftSelect.options[i];
if (option.selected) {
rightSelect.appendChild(option);
i--;
}
}
});
rightToLeftBtn.addEventListener("click", function() {
for (var i = 0; i < rightSelect.options.length; i++) {
var option = rightSelect.options[i];
if (option.selected) {
leftSelect.appendChild(option);
i--;
}
}
});
```
这段代码实现了将左侧的选项移动到右侧或者将右侧的选项移回到左侧。其中,左右两个select元素都设置了multiple属性,表示可以多选。通过循环遍历左侧和右侧的选项,判断是否被选中,从而实现移动。由于在移动过程中会改变options的长度,因此需要在移动完成后将变量i减1,以防止漏掉某些选项。这样就可以实现一个简单的穿梭框了,而且没有bug。
阅读全文