js穿梭框 实现_JS 原生穿梭框代码
时间: 2024-02-09 20:41:42 浏览: 26
以下是JS原生实现穿梭框的代码,可以参考使用:
HTML代码:
```
<div>
<select id="source" 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="toRight">添加>></button>
<button id="toLeft"><<移除</button>
<select id="target" multiple>
</select>
</div>
```
JS代码:
```
var sourceSelect = document.getElementById("source"); // 源选择框
var targetSelect = document.getElementById("target"); // 目标选择框
var toRightBtn = document.getElementById("toRight"); // 添加按钮
var toLeftBtn = document.getElementById("toLeft"); // 移除按钮
// 添加按钮事件
toRightBtn.onclick = function() {
var selectedOptions = sourceSelect.querySelectorAll("option:checked"); // 获取选中的选项
for (var i = 0; i < selectedOptions.length; i++) {
var option = selectedOptions[i];
targetSelect.appendChild(option); // 添加到目标选择框
}
};
// 移除按钮事件
toLeftBtn.onclick = function() {
var selectedOptions = targetSelect.querySelectorAll("option:checked"); // 获取选中的选项
for (var i = 0; i < selectedOptions.length; i++) {
var option = selectedOptions[i];
sourceSelect.appendChild(option); // 添加到源选择框
}
};
```
通过上述代码,可以实现基本的穿梭框功能。需要注意的是,如果需要美化样式,可以使用第三方组件,比如Bootstrap的穿梭框组件。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)