<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('#toAllRight').click(function () {
$('#se1 option').appendTo($('#se2'));
});
$('#toAllLeft').click(function () {
$('#se2 option').appendTo($('#se1'));
});
$('#toRight').click(function () {
$('#se1 option:selected').appendTo($('#se2'));
});
$('#toLeft').click(function () {
$('#se2 option:selected').appendTo($('#se1'));
})
})
</script>
</head>
<body>
<div style="margin-left:400px;margin-top:10px;">
<select multiple="multiple" style="float:left;80px;height:100px;" id="se1">
<option value="value">添加</option>
<option value="value">删除</option>
<option value="value">修改</option>
<option value="value">打印</option>
<option value="value">查询</option>
</select>
<div style="50px;float:left;">
<input type="button" name="name" value=">" style="50px;" id="toRight" />
<input type="button" name="name" value="<" style="50px;" id="toLeft" />
<input type="button" name="name" value="<<" style="50px;" id="toAllLeft" />
<input type="button" name="name" value=">>" style="50px;" id="toAllRight"/>
</div>
<select multiple="multiple" style="float:left;80px;height:100px" id="se2">
</select>
</div>
</body>
</html>