本文实例为大家分享了Jquery实现多选下拉列表左右移动的具体代码,供大家参考,具体内容如下
jquery实现核心代码
//需求:实现下拉列表选择条目左右选择功能 $(function () { //右移 $("#toRight").click(function () { //获取右边的下拉列表对象,append(左边选中的对象) $("#rightName").append($("#leftName > option:selected")); }); //左移 $("#toLeft").click(function () { $("#leftName").append($("#rightName > option:selected")); }); })
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://www.atool.online/js/jquery-3.3.1.min.js"></script> <style> #leftName , #btn,#rightName{ float: left; width: 100px; height: 300px; } #toRight,#toLeft{ margin-top:100px ; margin-left:30px; width: 50px; } .border{ height: 500px; padding: 100px; } </style> <script> //需求:实现下拉列表选择条目左右选择功能 $(function () { //右移 $("#toRight").click(function () { //获取右边的下拉列表对象,append(左边选中的对象) $("#rightName").append($("#leftName > option:selected")); }); //左移 $("#toLeft").click(function () { $("#leftName").append($("#rightName > option:selected")); }); }) </script> </head> <body> <div class="border"> <select id="leftName" multiple="multiple"> <option>张三</option> <option>李四</option> <option>王五</option> <option>赵六</option> </select> <div id="btn"> <input type="button" id="toRight" value="-->"><br> <input type="button" id="toLeft" value="<--"> </div> <select id="rightName" multiple="multiple"> <option>钱七</option> </select> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。