JS实现列表移动（通过DOM操作select标签）

最新推荐文章于 2023-09-22 13:20:19 发布

Yan Yang

最新推荐文章于 2023-09-22 13:20:19 发布

阅读量774

点赞数

分类专栏：前端小例题文章标签： javascript html js

本文链接：https://blog.csdn.net/zzvar/article/details/116105279

版权

这篇博客介绍了如何利用JavaScript实现对select标签的选择项进行移动操作，详细讲解了需求和实现代码，提供了可供参考的解决方案，鼓励读者进行讨论交流。

摘要由CSDN通过智能技术生成

JS小例题

学习内容：
- 需求
总结：

学习内容：

需求

用 JavaScript 实现 select 标签的移动

实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选择列表</title>

	<script type="text/javascript">
		function moveSelected(src, dest) {
    
			// 获取想要移动元素的 select 标签的所有 option 子标签
			var srcOpt = document.getElementById(src).options;
			// 获取移动目的地元素的 select 标签
			var destOpt = document.getElementById(dest);
			for(var i = srcOpt.length - 1; i >= 0; i--) {
    
				if(srcOpt[i].selected === true) {
    
					// 把移动标签作为子节点添加到目标节点
					destOpt.appendChild(srcOpt[i]