Jquery的append()方法实现两个数组列表的项目互相移动的效果

大学里面有个选修课程的时候，有两个列表，左侧列表存放要选的全部课程，然后将自己选修的课程移动到右侧列表中。下面是用jquery的append()方法简单的实现这个功能。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择大学课程</title>
</head>
<style>
	* {
		margin: 0;
		padding: 0;
	}

	select {
		display: inline-block;
		height: 200px;
		width: 200px;
		background-color: #ccc;
		color: #fff;
	 }

	div {
		display: inline-block;
		width: 50px;
		vertical-align: top;
		padding-left: 20px;
	}

	button {
		width: 30px;
	}
</style>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<body>
	<h1>大学可选课程：</h1>
	<select name="" id="src_courses" multiple>
		<option value="">公共英语</option>
		<option value="">计算机应用</option>
		<option value="">C++</option>
		<option value="">Java</option>
		<option value="">PHP</option>
		<option value="">.net</option>
	</select>
	<div class = "btns">
		<button>>></button>
		<button><<</button>
		<button>></button>
		<button><</button>
	</div>
	<select name="" id="tar_courses" multiple></select>
	<script type="text/javascript">
		$(function() {
			// 全部往右侧移动
			$(".btns button:eq(0)").click(function() {
				$("#tar_courses").append($("#src_courses option"));
			});
			// 全部往左侧移动
			$(".btns button:eq(1)").click(function() {
				$("#src_courses").append($("#tar_courses option"));
			});

			// 往右侧移动选中的选项
			$(".btns button:eq(2)").click(function() {
				$("#tar_courses").append($("#src_courses option:selected"));
			});

			// 往左侧移动选中的选项
			$(".btns button:eq(3)").click(function() {
				$("#src_courses").append($("#tar_courses option:selected"));
			});
		});
	</script>
</body>
</html>

Jquery的append()方法实现两个数组列表的项目互相移动的效果

猜你喜欢