在html中实现俩个下拉列表里面的对象互相移动
时间: 2024-03-13 22:43:05 浏览: 21
实现俩个下拉列表里面的对象互相移动,可以通过 JavaScript 来实现。
首先,需要在 HTML 中创建两个下拉列表,并设置它们的 id 和 onchange 事件,如下所示:
```
<select id="list1" onchange="moveItem(this.value, 'list1', 'list2')">
<option value="item1">选项1</option>
<option value="item2">选项2</option>
<option value="item3">选项3</option>
</select>
<select id="list2" onchange="moveItem(this.value, 'list2', 'list1')">
<option value="item4">选项4</option>
<option value="item5">选项5</option>
<option value="item6">选项6</option>
</select>
```
其中,onchange 事件会在选项改变时触发 JavaScript 函数 `moveItem`。`moveItem` 函数的作用是将选中的选项从一个下拉列表移动到另一个下拉列表。
接下来,在 JavaScript 中定义 `moveItem` 函数,如下所示:
```
function moveItem(itemValue, fromListId, toListId) {
var fromList = document.getElementById(fromListId);
var toList = document.getElementById(toListId);
// 查找要移动的选项
var item = null;
for (var i = 0; i < fromList.options.length; i++) {
if (fromList.options[i].value == itemValue) {
item = fromList.options[i];
break;
}
}
// 将选项添加到目标列表
if (item != null) {
toList.appendChild(item);
}
}
```
该函数接收三个参数:要移动的选项的值 `itemValue`,源下拉列表的 id `fromListId`,目标下拉列表的 id `toListId`。首先通过 id 获取源和目标下拉列表的元素对象,然后查找要移动的选项,并将其添加到目标列表中。
通过这样的方式,就可以实现俩个下拉列表里面的对象互相移动了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)