<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>下拉框移动</title> <script src="js/jquery-3.2.1.min.js"></script> <style> .all{ width: 700px; height:500px; } .left{ margin-left: 50px; margin-top: 100px; width: 200px; height:100px; float: left; } .mod{ margin-top: 100px; margin-left: 100px; width: 100px; height: 100px; float: left; } .right{ margin-top: 100px; width:200px; height:100px; float: right; } select{ width:200px; height:100px; } </style> <script> $(function () { $(".leftbtn").click(function () { $(".rightsel").append($(".leftsel > option:selected")); }); $(".reghtbtn").click(function () { $(".rightsel > option:selected").appendTo($(".leftsel")); }); }); </script></head><body><div class="all"><div class="left"> <select multiple="multiple" class="leftsel"> <option>山东</option> <option>山西</option> <option>陕西</option> <option>北京</option> <option>上海</option> </select></div><div class="mod"> <br> <input type="button" value="-->" class="leftbtn"><br><br><br> <input type="button" value="<--" class="reghtbtn"></div><div class="right"> <select class="rightsel" multiple="multiple"> <option>江苏</option> </select></div></div></body></html> 