<div class="centent">
<select multiple id="select1" style="width:130px;height:180px;">
<option value="1">孙克杰</option>
<option value="2">朱信宗</option>
<option value="3">杨帆</option>
<option value="4">林非比</option>
<option value="5">亚历山大</option>
<option value="6">凌峰</option>
<option value="7">宋松</option>
<option value="8">王子瑜</option>
</select>
<div class="span1">
<span id="add">右移>></span><br/>
<span id="add_all">全部>></span>
</div>
</div>
<div class="centent">
<select multiple id="select2" style="width:130px;height:180px">
</select>
<div class="span2">
<span id="remove" style="width:500px">左移<<</span><br/>
<span id="remove_all">全部<<</span>
</div>
</div>
<style type="text/css">
span{
border:1px solid black;
background-color:#99FFFF;
cursor:pointer;
}
.centent{
width:200px;
float:left;
}
.span1{
position:absolute;
top:350px;
left:150px;
}
#add_all{
position:absolute;
top:30px;
}
.span2{
position:absolute;
top:410px;
left:150px;
}
#remove_all{
position:absolute;
top:30px;
}
</style>
<script> $(function(){ $("#add").click(function(){ var $options = $("#select1 option:selected");//获取选中的选项 $options.appendTo("#select2");//追加到select2的select中 }); $("#add_all").click(function(){ var $options = $("#select1 option"); $options.appendTo("#select2"); }); //实现双击时,右移 $("#select1").dblclick(function(){ var $options = $("#select1 option:selected"); $options.appendTo("#select2"); }); $("#remove").click(function(){ var $options = $("#select2 option:selected"); $options.appendTo("#select1"); }); $("#remove_all").click(function(){ var $options = $("#select2 option"); $options.appendTo("#select1"); }); $("#select2").dblclick(function(){ var $options = $("#select2 option:selected"); $options.appendTo("#select1"); }); }); </script>
转载于:https://blog.51cto.com/dd118/1671376