jQuery 下拉選擇框 左右移動 左右添加

cn55 9年前發布 | 2K 次閱讀 JavaScript jQuery 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;


<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title></title>
  <style type="text/css">
/<![CDATA[/


    

  • { margin:0; padding:0; }
div.centent {
float:left;
text-align: center;
margin: 10px;
}
span {
    


    display:block;
margin:2px 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
font-size:12px;
color:white;

    

    }
/]]>/
</style><!--   引入jQuery -->
    

    <script src="../scripts/jquery-1.3.1.js" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
$(function(){
    


    //移到右邊
$('#add').click(function() {
//獲取選中的選項，刪除并追加給對方
        $('#select1 option:selected').appendTo('#select2');
});
//移到左邊
$('#remove').click(function() {
        $('#select2 option:selected').appendTo('#select1');
});
//全部移到右邊
$('#add_all').click(function() {
        //獲取全部的選項,刪除并追加給對方
        $('#select1 option').appendTo('#select2');
});
//全部移到左邊
$('#remove_all').click(function() {
        $('#select2 option').appendTo('#select1');
});
//雙擊選項
$('#select1').dblclick(function(){ //綁定雙擊事件
        //獲取全部的選項,刪除并追加給對方
        $("option:selected",this).appendTo('#select2'); //追加給對方
});
//雙擊選項
$('#select2').dblclick(function(){
   $("option:selected",this).appendTo('#select1');
});

    

    });
//]]>
</script>
</head>
    

    • 



<body>
  <div class="centent">
    <select multiple="multiple" id="select1" style="width:100px;height:160px;">
      <option value="1">
        選項1
      </option>



  <option value="2">
    選項2
  </option>

  <option value="3">
    選項3
  </option>

  <option value="4">
    選項4
  </option>

  <option value="5">
    選項5
  </option>

  <option value="6">
    選項6
  </option>

  <option value="7">
    選項7
  </option>
</select>

<div>
  <span id="add">選中添加到右邊&gt;&gt;</span> <span id="add_all">全部添加到右邊&gt;&gt;</span>
</div>



</div>


<div class="centent">
    <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
      <option value="8">
        選項8
      </option>
    </select>



<div>
  <span id="remove">&lt;&lt;選中刪除到左邊</span> <span id="remove_all">&lt;&lt;全部刪除到左邊</span>
</div>



</div>
</body>
</html></pre>
 本文由用戶 cn55 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！