jQuery 下拉选择框左右移动左右添加详解编程语言

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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 id="add_all">全部添加到右边&gt;&gt; 
    </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 id="remove_all">&lt;&lt;全部删除到左边 
    </div> 
  </div> 
</body> 
</html>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/8649.html
jQuery 下拉选择框 左右移动 左右添加详解编程语言

相关推荐

发表回复

jQuery 下拉选择框左右移动左右添加详解编程语言
