javaweb dom的增删改小游戏 --从左到右，从右到左

最新推荐文章于 2021-10-05 13:56:20 发布

孔雀南飞梦

最新推荐文章于 2021-10-05 13:56:20 发布

阅读量111

点赞数

分类专栏：笔记文章标签： js jquery html5

本文链接：https://blog.csdn.net/qq_52360788/article/details/119685623

版权

笔记专栏收录该内容

58 篇文章 0 订阅

订阅专栏

可能需要用到的方法

/*
dom的增删改
appendTo（） a.appendTo（b）把a插入到b元素末尾，成为最后一个子元素
prependTo(content) a.prependTo(b) 把a插入到b所有子元素前面，成为第一个子元素
外部插入
insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
替换
replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素。（一个）
  replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。
  删除
  empty() 删除匹配的元素集合中所有的子节点。  a.empty() 清空a标签里的内容
  remove([expr]) 从DOM中删除所有匹配的元素。 a.remove()删除a标签
*/

appendTo（）会自动删除移动前的元素

<!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="../js/jquery.js"></script>
	<script type="text/javascript">
		/*
		dom的增删改
		appendTo（）	a.appendTo（b） 把a插入到b元素末尾，成为最后一个子元素
		prependTo(content)	a.prependTo(b) 把a插入到b所有子元素前面，成为第一个子元素
		外部插入
		insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
		insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
		替换
		 replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素。（一个）
		  replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。
		  删除
		  empty() 删除匹配的元素集合中所有的子节点。  a.empty() 清空a标签里的内容
		  remove([expr]) 从DOM中删除所有匹配的元素。 a.remove()删除a标签
		*/
		$(function(){
			//选中添加到右边
			$("#btn1").click(function () {
				//获取选中项
				let $select = $("select[name='sel01']>option:selected");
				//移动到右边
				$select.appendTo($("select[name='sel02']"));
				$select.prop("selected","true");
			})
			//全部添加到右边
			$("#btn2").click(function () {
				//获取项
				let $select = $("select[name='sel01']>option");
				//移动到右边
				$select.appendTo($("select[name='sel02']"));
			})
			//选中删除到左边
			$("#btn3").click(function () {
				//获取选中项
				let $select = $("select[name='sel02']>option:selected");
				//移动到左边
				$select.appendTo($("select[name='sel01']"));
				//选中
				$select.prop("selected","true");
			})
			//全部删除到左边
			$("#btn4").click(function () {
				//获取项
				let $select = $("select[name='sel02']>option");
				//移动到左边
				$select.appendTo($("select[name='sel01']"));
			})
		});
	
	</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 id="btn1">选中添加到右边</button>
		<button id="btn2">全部添加到右边</button>
	</div>
	<div id="rigth">
		<select multiple="multiple" name="sel02">
		</select>
		<button id="btn3">选中删除到左边</button>
		<button id="btn4">全部删除到左边</button>
	</div>

</body>
</html>