标签:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery-2.1.4.min.js"></script> <script type="text/javascript"> $(function() { //点击"添加"事件 $("#add").click(function() { $("#selectLeft :selected").appendTo("#selectRight"); }); //点击"添加全部"事件 $("#addAll").click(function() { $("#selectLeft option").appendTo("#selectRight"); }); //点击"删除"事件 $("#remove").click(function() { $("#selectRight :selected").appendTo("#selectLeft"); }); //点击"删除全部"事件 $("#removeAll").click(function() { $("#selectRight option").appendTo("#selectLeft"); }); //双击左选择框事件 $("#selectLeft").dblclick(function() { $("#selectLeft :selected").appendTo("#selectRight"); }); //双击右选择框事件 $("#selectRight").dblclick(function() { $("#selectRight :selected").appendTo("#selectLeft"); }); }); </script> <!-- CSS --> <style type="text/css"> .content { position: absolute; top: 10px; width: 170px; text-align: center; } select { height: 160px; width: 150px; } </style> </head> <!-- HTML --> <body> <div class="content"> <select id="selectLeft" multiple="multiple"> <option value="1">AAAAAAAAAAA</option> <option value="2">BBBBBBBBBBB</option> <option value="3">SSSSSSSSSSS</option> <option value="4">KKKKKKKKKKK</option> <option value="5">EEEEEEEEEEE</option> <option value="6">VVVVVVVVVVV</option> <option value="7">XXXXXXXXXXX</option> <option value="8">YYYYYYYYYYY</option> </select> <div> <button id="add">添加选中项到右边>></button><br /> <button id="addAll">添加全部项到右边>></button> </div> </div> <div class="content" style="left: 180px;"> <select id="selectRight" multiple="multiple"></select> <div> <button id="remove"><<删除选中项到左边</button><br /> <button id="removeAll"><<删除全部项到左边</button> </div> </div> </body> </html>
标签:
原文地址:http://www.cnblogs.com/qhorse/p/5216948.html