<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div, div button {
display: inline-block;
float: left;
}
#button {
margin: 10px 10px;
}
</style>
</head>
<body>
<div>
<select name="" multiple>
<option value="">nihao1</option>
<option value="">nihao2</option>
<option value="">nihao3</option>
<option value="">nihao4</option>
</select>
</div>
<div >
<button > ></button>
<br>
<button > <</button>
</div>
<div>
<select multiple>
<option value="">hah1</option>
<option value="">hah2</option>
</select>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// 选中全部
$('#select_all').click(function () {
$('#eg2').append($('#eg1>option'));
});
// 取消全部
$('#cancel_all').click(function () {
$('#eg1').append($('#eg2>option'));
});
// 双击选中
$('#eg1').on('dblclick', 'option', function () {
$('#eg2').append($(this));
});
// 双击取消
$('#eg2').on('dblclick', 'option', function () {
$('#eg1').append($(this));
});
</script>
</body>
</html>