首页 > 代码库 > JQ写下拉列表项目移动,还存在2个小BUG(内附效果图和源代码)
JQ写下拉列表项目移动,还存在2个小BUG(内附效果图和源代码)
效果图如下:
实现功能:点击第一个按钮,让选中的对象从左边移动到右边;
点击第二个按钮,让左边的所有对象移动到右边;
点击第三个按钮,让选中的对象从右边边移动到左边;
点击第四个按钮,让右边的所有对象移动到左边。
存在BUG:点击第一个或者第三个按钮,不选择对象也能让末位的对象移动到另外一个框中;
选中2个以上的对象,点击第一或者第三个按钮,只能移动一个对象到另一边。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script> <style type="text/css"> select{width:130px; height:220px;} </style> <script> //$(selector).append(content) :将content追加到selector选择器内部的最后面 // $(content).appendTo(selector):将content追加到selector选择器内部的最后面 $(function () { //当页面加载完成时; $("input").eq(0).click( function () { //按下第一个按钮,触发函数 var n = $("#hebei")[0].selectedIndex; //获取被选中的option的下标n $("#hebei>option").eq(n).appendTo($("#henan")); //把下标为n的option移动到henan的下拉列表中 }); $("input").eq(1).click( function () { //按下第二个按钮,触发函数 $("#hebei>option").appendTo($("#henan")); //把hebei的option全部移动到henan的下拉列表中 }); $("input").eq(2).click( function () { //按下第三个按钮,触发函数 var n = $("#henan")[0].selectedIndex; //获取被选中的option的下标n $("#henan>option").eq(n).appendTo($("#hebei")); //把下标为n的option移动到hebei的下拉列表中 }); $("input").eq(3).click( function () { //按下第四个按钮,触发函数 $("#henan>option").appendTo($("#hebei")); //把henan的option全部移动到hebei的下拉列表中 }); }); </script> </head> <body> <select id="hebei" multiple="multiple"> <option>石家庄</option> <option>保定</option> <option>邯郸</option> <option>邢台</option> <option>衡水</option> </select> <select id="henan" multiple="multiple"> <option>郑州</option> <option>开封</option> <option>洛阳</option> <option>周口</option> <option>信阳</option> </select><br /><br /> <input type="button" value="http://www.mamicode.com/-->"> <input type="button" value="http://www.mamicode.com/==>" > <input type="button" value="http://www.mamicode.com/<--" > <input type="button" value="http://www.mamicode.com/<==" > </body> </html>
JQ写下拉列表项目移动,还存在2个小BUG(内附效果图和源代码)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。