<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>下拉框移动</title>
<script src="js/jquery-3.2.1.min.js"></script>
<style>
.all{
700px;
height:500px;
}
.left{
margin-left: 50px;
margin-top: 100px;
200px;
height:100px;
float: left;
}
.mod{
margin-top: 100px;
margin-left: 100px;
100px;
height: 100px;
float: left;
}
.right{
margin-top: 100px;
200px;
height:100px;
float: right;
}
select{
200px;
height:100px;
}
</style>
<script>
$(function () {
$(".leftbtn").click(function () {
$(".rightsel").append($(".leftsel > option:selected"));
});
$(".reghtbtn").click(function () {
$(".rightsel > option:selected").appendTo($(".leftsel"));
});
});
</script>
</head>
<body>
<div class="all">
<div class="left">
<select multiple="multiple" class="leftsel">
<option>山东</option>
<option>山西</option>
<option>陕西</option>
<option>北京</option>
<option>上海</option>
</select>
</div>
<div class="mod">
<br>
<input type="button" value="-->" class="leftbtn"><br><br><br>
<input type="button" value="<--" class="reghtbtn">
</div>
<div class="right">
<select class="rightsel" multiple="multiple">
<option>江苏</option>
</select>
</div>
</div>
</body>
</html>