When there is an elective course in the university, there are two lists. The list on the left stores all the courses to be selected, and then moves the courses you take to the list on the right. The following is a simple implementation of this function using jquery's append() method.
<!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>