<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>左右两个选择框内容双向切换</title> <script type="text/javascript" src="jquery-1.8.1.min.js"></script> <script> $(function(){ $("#select1").dblclick(function(){ var $option = $("#select1 option:selected"); $option.appendTo("#select2"); }); $("#addAll").click(function(){ $("#select1 option").appendTo("#select2"); }); $("#select2").dblclick(function(){ var $option = $("#select2 option:selected"); $option.appendTo("#select1"); }); $("#removeAll").click(function(){ $("#select2 option").appendTo("#select1"); }); }) </script> </head> <body> <!--左框--> <div class="content" style="float: left;margin: 20px;"> <select multiple="multiple" id="select1" style="width: 100px;height:200px;"> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <option>选项5</option> <option>选项6</option> <option>选项7</option> <option>选项8</option> </select> <div> <span id="addAll">Add All>></span> </div> </div> <!--右框--> <div class="content" style="float: left;margin: 20px;"> <select multiple="multiple" id="select2" style="width: 100px;height:200px;"> </select> <div> <span id="removeAll">Remove All>></span> </div> </div> </body> </html>
