兩個select的內容左右移動

標籤：右移   select   左移   

<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>

兩個select的內容左右移動