<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
select {
100px;
height: 150px;
}
form {
display: flex;
}
div {
40px;
}
</style>
</head>
<body>
<form action="#" method="get">
<select name="" id="name" multiple>
<option value="zgl">诸葛亮</option>
<option value="zf">张飞</option>
<option value="gy">关羽</option>
<option value="xc">许褚</option>
<option value="lb">刘备</option>
<option value="cc">曹操</option>
</select>
<div>
<input type="button" value=">">
<input type="button" value=">>">
<input type="button" value="<">
<input type="button" value="<<">
</div>
<select name="" id="changeName" multiple>
</select>
<div>
<input type="button" value="↑">
<input type="button" value="↓">
</div>
</form>
<script src="./jquery-1.12.4.min.js"></script>
<script>
window.onload = function name(params) {
//向右移动选中的项
$("input[value='>']").click(function () {
$("select option:selected").appendTo("#changeName");
})
//向右移动所有项
$("input[value='>>']").click(function () {
$("select option").appendTo("#changeName");
})
//向左移动选中的项
$("input[value='<']").click(function () {
$("#changeName>option:selected").appendTo("#name");
})
//向左移动所有项
$("input[value='<<']").click(function () {
$("#changeName option").appendTo("#name");
})
//上移
$("input[value = '↑']").click(function () {
$("#changeName option:selected:first").prev().before($("#changeName option:selected"))
$("#name option:selected:first").prev().before($("#name option:selected"))
})
//下移
$("input[value = '↓']").click(function () {
$("#name option:selected:last").next().after($("#name option:selected"))
$("#changeName option:selected:last").next().after($("#changeName option:selected"))
})
}
</script>
</body>
</html>