代码描述:select下拉菜单项互换。select下拉菜单项互换效果代码实例
在不少的效果中都有select下拉菜单项中的option元素相互置换的效果。 下面就通过代码实例介绍一下如何实现此功能。 代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#toRight").click(function(){ $("#selectLeft option:selected").each(function(){ $("#selectRight").append("<option value="+$(this).val()+">"+$(this).html()+"</option>"); $(this).remove(); }); }); $("#toLeft").click(function(){ $("#selectRight option:selected").each(function(){ $("#selectLeft").append("<option value="+$(this).val()+">"+$(this).html()+"</option>"); $(this).remove(); }) }) }) </script> </head> <body> <table> <tr> <td> <select size='10' multiple id="selectLeft"> <option value="0">51前端</option> <option value="1">js教程</option> <option value="2">css教程</option> <option value="3">softwhy.com</option> <option value="4">正则表达式</option> <option value="5">特效代码</option> <option value="6">div教程</option> </select> </td> <td> <input type="button" value=">>" id="toRight" /> <br /> <br /> <input type="button" value="<<" id="toLeft" /> </td> <td> <select size='10' multiple id="selectRight"> <option value="7">电脑模板</option> </select> </td> </tr> </table> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能