（注释超级详细）jQuery中实现从左到右，从右到左的关键代码理解

最新推荐文章于 2023-06-01 03:05:17 发布

晓风残月一望关河萧索

最新推荐文章于 2023-06-01 03:05:17 发布

阅读量782

点赞数 2

分类专栏：【JavaEE基础】文章标签： jquery

本文链接：https://blog.youkuaiyun.com/Sunshineoe/article/details/109695477

版权

【JavaEE基础】专栏收录该内容

14 篇文章

订阅专栏

该博客展示了如何使用jQuery实现HTML中下拉框的选项动态转移。通过监听按钮点击事件，可以将选中或全部选项从左侧下拉框移动到右侧，反之亦然。示例代码详细说明了这一过程，适用于前端开发中元素操作的学习和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键代码：

<script type="text/javascript">
		$(function () {
			//选中下拉框内容添加到右边,按钮的个数有4个，下标分别为0,1,2,3
			$("button:eq(0)").click(function () {
				// 下拉框的 第一个下拉框，option的选择被选中,下拉框标签由 0 ---> 1
				$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
			});
			//将下拉框的全部内容添加到右边
			$("button:eq(1)").click(function () {
				$("select:eq(0) option").appendTo($("select:eq(1)"));
			});

			//将右边的选中的发送到左边
			$("button:eq(2)").click(function () {
				$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
			});
			//全部将右边的选中的发送到左边
			$("button:eq(3)").click(function () {
				$("select:eq(1) option").appendTo($("select:eq(0)"));
			});
		});
	</script>

1.先看下效果

①选中左边下拉框的值添加到右边

②将左边下拉框全部的值添加到右边

③选中右边下拉框的值添加到左边

④右边下拉框全部的值添加到左边

2.全部实现代码

<!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>Insert title here</title>
	<style type="text/css">
		select {
			width: 100px;
			height: 140px;
		}
		
		div {
			width: 130px;
			float: left;
			text-align: center;
		}
	</style>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function () {
			//选中下拉框内容添加到右边,按钮的个数有4个，下标分别为0,1,2,3
			$("button:eq(0)").click(function () {
				// 下拉框的 第一个下拉框，option的选择被选中,下拉框标签由 0 ---> 1
				$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
			});
			//将下拉框的全部内容添加到右边
			$("button:eq(1)").click(function () {
				$("select:eq(0) option").appendTo($("select:eq(1)"));
			});

			//将右边的选中的发送到左边
			$("button:eq(2)").click(function () {
				$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
			});
			//全部将右边的选中的发送到左边
			$("button:eq(3)").click(function () {
				$("select:eq(1) option").appendTo($("select:eq(0)"));
			});
		});
	</script>
</head>
<body>

	<div id="left">
		<select multiple="multiple" name="sel01">
			<option value="opt01">选项1</option>
			<option value="opt02">选项2</option>
			<option value="opt03">选项3</option>
			<option value="opt04">选项4</option>
			<option value="opt05">选项5</option>
			<option value="opt06">选项6</option>
			<option value="opt07">选项7</option>
			<option value="opt08">选项8</option>
		</select>
		
		<button>选中添加到右边</button>
		<button>全部添加到右边</button>
	</div>
	<div id="rigth">
		<select multiple="multiple" name="sel02">
		</select>
		<button>选中删除到左边</button>
		<button>全部删除到左边</button>
	</div>

</body>
</html>