jQuery表单之 Select

最新推荐文章于 2024-09-08 21:45:17 发布

larry123123

最新推荐文章于 2024-09-08 21:45:17 发布

阅读量188

点赞数

分类专栏： jQuery 文章标签： jquery function select button input

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

[javascript]view plaincopy 
   
 <script src="http://www.gamejzy.com/js/jquery.js" type="text/javascript"></script>  
 <p>  
 <select id="select1" multiple 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>  
     <option value="8">选项8</option>  
 </select>       
 <select id="select2" multiple style="width:100px;height:160px;"></select>  
 </p>  
 <p><input type="button" value="选中添加到右边" id="add_selected" /> <input type="button" value="选中删除到左边" id="remove_selected" /></p>  
 <p><input type="button" value="全部添加到右边" id="add_all" /> <input type="button" value="全部删除到左边" id="remove_all" /></p>  
 <script type="text/javascript">  
 $(document).ready(function(){  
     $("#add_selected").bind('click', function(){  
         $options = $("#select1 option:selected"); //获取选中的选项  
         $options.appendTo('#select2');            //追加给对方  
     })  
     $("#remove_selected").bind('click', function(){  
         $options = $("#select2 option:selected"); //获取选中的选项  
         $options.appendTo('#select1');            //追加给对方  
     })  
     $("#add_all").bind('click', function(){  
         $options = $("#select1 option");          //获取选中的选项  
         $options.appendTo('#select2');            //追加给对方  
     })  
     $("#remove_all").bind('click', function(){  
         $options = $("#select2 option");          //获取选中的选项  
         $options.appendTo('#select1');            //追加给对方  
     })  
 })  
 </script>  