<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-3.1.1/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
var $options = $("#pp1 option:selected")
var $remove = $options.remove()
$options.appendTo("#pp2")
}) //2
$("#add_all11").click(function(){
var $options = $("#pp1 option")
$options.appendTo("#pp2")
}) //3
$("#remove").click(function(){
var $options = $("#pp2 option:selected")
$options.appendTo("#pp1")
})//4
$("#remove_all").click(function(){
var $options = $("#pp2 option")
var $remove11 = $options.remove()
$options.appendTo("#pp1")
}) //5
}) //1
</script>
<style type="text/css">
select{ border: 1px solid #C92427;
width: 130px;
height: 160px;
font-size:20px;
margin-top: 20px;
margin-left: 20px;
}
/*option{background-color:#8ACFF0}*/
option:hover {
background:#E44C4F;
}
span{background-color:#C7C38F;
font-size:16px;
margin-left: 18px;
}
.centent{ float: left;
}
.ss1{
margin-top: 6px;
}
</style>
</head>
<body>
<div>
<div class="centent">
<select multiple id="pp1" value = "Volo1">
<option value="vo" >Volvo1</option>
<option value="saa2">Saab2</option>
<option value="opel" selected="selected">Opel3</option>
<option value="audi">Audi4</option>
<option value="volvo">Volvo5</option>
<option value="saab">Saab6</option>
<option value="opel">Opel7</option>
<option value="audi">Audi8</option>
</select>
<div class="ss1">
<span id="add">选中添加到右边：>></span><br/><br/>
<span id="add_all11">全部添加到右边:>></span>
</div>
</div>
<div class="centent">
<select multiple id="pp2">
<option value=""></option>
</select>
<div class="ss1">
<span id="remove"><<选中删除到左边</span><br/><br/>
<span id="remove_all"><<选中全部到左边</span>
</div>
</div>
</div>
</body>
</html>
联系客服
