jQuery实现select多选框左右添加,包括双击事件

<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="126">
    <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
<select name="first" size="10" multiple="multiple" class="td3" id="first">
 <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>
 <option value="选项8">选项8</option>
</select>    
</td>
    <td width="69" valign="middle">
       <input name="add"  id="add" type="button" class="button" value="-->" /> 
       <input name="add_all" id="add_all"  type="button" class="button" value="==>" /> 
       <input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
  <input name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" />
        </td>
    <td width="127" align="left">
 <select name="second" size="10" multiple="multiple" class="td3" id="second">
         <option value="选项9">选项9</option>
      </select>
</td>
  </tr>

</table>


<script type="text/javascript">
 
  $("#add").click(function(){
  $("#first option").each(function(){
  if(this.selected==true){
  $("#second").append(this);
  }
  });
  });
  $("#add_all").click(function(){
  $("#first option").each(function(){
  $("#second").append(this);
  });
  });
  $("#remove").click(function(){
  $("#second option").each(function(){
  if(this.selected==true){
  $("#first").append(this);
  }
  });
  });
  $("#remove_all").click(function(){
  $("#second option").each(function(){
  $("#first").append(this);
  });
  });
 
  $("#first").dblclick(function(){
  $("#first option").each(function(){
  if(this.selected==true){
  $("#second").append(this);
  }
  });
  });
</script>
   

你可能感兴趣的:(jquery,select)