前端专题 JQuery实现左右框添加内容

最新推荐文章于 2021-06-02 20:52:13 发布

极光雨雨

最新推荐文章于 2021-06-02 20:52:13 发布

阅读量209

点赞数

分类专栏： # H5 CSS JS基础文章标签： jquery html js

本文链接：https://blog.csdn.net/weixin_44131922/article/details/107896314

版权

H5 CSS JS基础专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			select{
				width: 200px;
				height: 300px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#IDyi").click(function(){
					$("#idleft option:selected").appendTo($("#idright"))
				})
				$("#idleft option").dblclick(function(){				//双击事件
					$("#idleft option:selected").appendTo($("#idright"))
				})
				$("#IDduo").click(function(){
					$("#idleft option").appendTo($("#idright"))
				})					//append 原有元素不减少，添加到另一个中
							//appendTo 将原来中的添加到另一个中原来的会消失
							
				$("#IDyi2").click(function(){
					$("#idright option:selected").appendTo("#idleft")
				})
				$("#IDduo2").click(function(){
					$("#idright option").appendTo("#idleft")
				})
			})
		</script>
	</head>
	<body>
		<select id="idleft" multiple="multiple">
			<option>AAAAA</option>
			<option>BBBBB</option>
			<option>CCCCC</option>
			<option>DDDDD</option>
			<option>EEEEE</option>
			<option>FFFFF</option>
			<option>GGGGG</option>
		</select>
		<select id="idright" multiple="multiple">
			
		</select>
		<p>
			<button id="IDyi">></button>
			<button id="IDduo">>>></button>
		</p>
		<p>
			<button id="IDyi2"><</button>
			<button id="IDduo2"><<<</button>
		</p>
	</body>
</html>

极光雨雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端专题 JQuery实现左右框添加内容

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> select{ width: 200px; height: 300px; } </style> <script type="text/javascript" src="js/
复制链接

扫一扫