Jquery实现多选下拉列表左右移动
更新时间:2022年02月22日 14:35:50 作者:a远方少年
这篇文章主要为大家详细介绍了Jquery实现多选下拉列表左右移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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="../../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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
列化中文时出现中文乱码问题,怎么回事呢?下面给大家介绍下jQuery使用serialize()序列化表单时出现中文乱码问题的解决办法,有需要的朋友参考下2016-07-07sliderToggle在写jquery的计时器setTimeouter中不生效
sliderToggle在setTimeouter中不生效,还报错说是发生了意想不到的错误2014-05-05jquery根据一个值来选中select下的option实例代码
下面小编就为大家带来一篇jquery根据一个值来选中select下的option实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-08-08
最新评论