jQuery 练习：将左边下拉列表中的选项添加到右边的下拉列表和将右边下拉列表中的元素删除到左边下拉列表（从左到右，从右到左）

最新推荐文章于 2024-04-28 18:37:37 发布

海梨

最新推荐文章于 2024-04-28 18:37:37 发布

阅读量436

点赞数 1

分类专栏： Java Web 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46102920/article/details/109034599

版权

Java Web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

代码展示：

<!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 () { // 页面加载完成
			//第一个按钮【选中添加到右边】
			$("button:eq(0)").click(function () {
				$("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>

海梨

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery 练习：将左边下拉列表中的选项添加到右边的下拉列表和将右边下拉列表中的元素删除到左边下拉列表（从左到右，从右到左）

代码展示：<!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&
复制链接

扫一扫