一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择
2017-07-06 09:39
681 查看
使用jQuery完成下拉列表左右选择
有这样一个需求，在(商品)分类的修改页面中，如下这样一个页面：
有某个分类下的所属的商品信息，我们应该可以对这些商品信息进行选择。即在修改分类的时候可以去添加商品，这时就需要用到下拉列表的左右选择了。
首先我们应该创建一个(商品)分类的修改页面，最后的运行效果正如上图。这里给出这样一个页面——【edit.html】：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <table border="1" width="500" align="center"> <tr> <td>分类名称</td> <td><input type="text" name="cname" value="手机数码" /></td> </tr> <tr> <td>分类描述</td> <td><textarea name="cdesc" cols="20" rows="4">手机数码</textarea></td> </tr> <tr> <td>分类商品</td> <td> <span style="float: left;"> 已有的商品<br/> <!-- 如果想要让下拉列表全部显示出来，需要加一个属性multiple --> <select id="selectLeft" multiple="multiple"> <option>iPhone</option> <option>三星</option> <option>小米</option> <option>锤子</option> </select> <p id="addRight">>></p> <p id="addAll">>>></p> </span> <span style="float: right;"> 未有的商品<br/> <select id="selectRight" multiple="multiple"> <option>华为</option> <option>HTC</option> </select> <p id="removeLeft"><<</p> <p id="removeAll"><<<</p> </span> </td> </tr> <tr> <td colspan="2"><input type="submit" value="确定" /></td> </tr> </table> </form> </body> </html>
提示：如果想要让下拉列表全部显示出来，需要添加一个multiple属性。
先不使用jQuery来实现下拉列表左右选择这个功能，如果使用传统的纯js去实现该功能，那么又应该如何自处呢？我的做法如下：
<script>
window.onload = function() {
// 使用传统的纯js去实现
// 添加到右侧(动态绑定)
document.getElementById("addRight").onclick = function() {
// 获得左侧的下拉列表
var selectLeft = document.getElementById("selectLeft");
// 遍历左侧下拉列表中的所有的option元素
for(var i = selectLeft.options.length - 1; i >= 0; i--) {
// 判断该元素是否被选中了
if(selectLeft.options[i].selected == true) {
document.getElementById("selectRight").appendChild(selectLeft.options[i]);
}
}
}
// 全部添加到右侧(动态绑定)
document.getElementById("addAll").onclick = function() {
// 获得左侧的下拉列表
var selectLeft = document.getElementById("selectLeft");
// 遍历左侧下拉列表中的所有的option元素
for(var i = selectLeft.options.length - 1; i >= 0; i--) {
document.getElementById("selectRight").appendChild(selectLeft.options[i]);
}
}
}
</script>从上面可看出我也只是实现了添加左侧下拉列表中选中的option元素(或者所有option元素)到右侧下拉列表中，想必大家应该知道了如何添加右侧下拉列表中选中的option元素(或者所有option元素)到左侧下拉列表中，在此我并不过多赘述。
如果使用jQuery来实现这个功能，代码写起来会不会比较简单呢？答案是肯定的。要想使用jQuery完成下拉列表的左右选择，必须要知道以下知识点：
jQuery的表单对象属性选择器
:enabled：匹配所有可用元素
:disabled：匹配所有不可用元素
:checked：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected：匹配所有选中的option元素，此处就用到了该选择器。
接下来我就来编写jQuery代码完成下拉列表的左右选择这个功能，如下：
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
<script>
$(function() {
// 添加左侧下拉列表中选中的option元素到右侧下拉列表中
$("#addRight").click(function() {
// 获得左侧下拉列表中被选中的option元素
$("#selectLeft option:selected").appendTo("#selectRight");
});
// 添加所有左侧下拉列表中选中的option元素到右侧下拉列表中
$("#addAll").click(function() {
// 获得左侧下拉列表中被选中的option元素
$("#selectLeft option").appendTo("#selectRight");
});
// 移除右侧下拉列表中选中的option元素到左侧下拉列表中
$("#removeLeft").click(function() {
// 获得右侧下拉列表中被选中的option元素
$("#selectRight option:selected").appendTo("#selectLeft");
});
// 移除所有右侧下拉列表中选中的option元素到左侧下拉列表中
$("#removeAll").click(function() {
// 获得右侧下拉列表中被选中的option元素
$("#selectRight option").appendTo("#selectLeft");
});
});
</script>这里我们需要注意：使用jQuery有个要求，必须要先导入jQuery的类库。jQuery的类库虽说有很多个版本，但是使用起来绝大多数都是差不多的。
虽说已实现了下拉列表左右选择这个功能，但是我们依然不满足，我们还要添加这样一个功能——双击左(右)侧下拉列表中的某个option元素，并移动到右(左)侧下拉列表中。实现该功能，代码写起来也很简单，如下：
<script>
$(function() {
// 双击左侧下拉列表中的某个option元素，并移动到右侧下拉列表中
$("#selectLeft").dblclick(function() {
// 我们能想到的第一种jQuery写法
// $("#selectLeft option:selected").appendTo("#selectRight");
// 另一种jQuery写法
$("option:selected", this).appendTo("#selectRight");
});
// 双击右侧下拉列表中的某个option元素，并移动到左侧下拉列表中
$("#selectRight").dblclick(function() {
// 另一种jQuery写法
$("option:selected", this).appendTo("#selectLeft");
});
});
</script>jQuery常用事件
查看jQuery API帮助文档可知，jQuery中的常用事件有：
对于以上常用事件，大家在实际开发中自行体会。
除此之外，还有如下两个jQuery的事件切换：
toggle()：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件。
注意：jQuery1.9版本中toggle()方法已经被删除了，所以要使用该方法，最好使用jQuery1.8这个版本。
hover()：当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
举例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script>
<script>
// 表格的隔行换色
$(function() {
/*
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
*/
$("tbody tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
});
// 复选框的全选和全不选
$(function() {
// 获得上面的复选框
var $selectAll = $("#selectAll");
// alert($selectAll.prop("checked")); // 返回undefined未定义
$selectAll.click(function() {
// alert($selectAll.prop("checked"));
if ($selectAll.prop("checked") == true) {
// 上面的复选框已被选中
$(":checkbox[name='ids']").prop("checked", true);
} else {
// 上面的复选框没被选中
$(":checkbox[name='ids']").prop("checked", false);
}
});
/*
// 简化版
$("#selectAll").click(function() {
$(":checkbox[name='ids']").prop("checked", this.checked); // this指代的你当前选择的这个元素的JS对象
});
*/
});
$(function() {
// 对表格的某一行切换一个类
/*
$("tbody tr").toggle(function() {
$(this).addClass("selected");
}, function() {
$(this).removeClass("selected");
});
*/
// 当鼠标移到表格的某一行上或移出表格的某一行时切换一个类
$("tbody tr").hover(function() {
$(this).addClass("selected");
}, function() {
$(this).removeClass("selected");
});
})
</script>
</head>
<body>
<table id="tab1" border="1" width="80%" align="center">
<thead>
<tr>
<th><input type="checkbox" id="selectAll" /></th>
<th>分类的ID</th>
<th>分类的名称</th>
<th>分类的描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码</td>
<td><a href="edit.html">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>3</td>
<td>烟酒糖茶</td>
<td>烟酒糖茶</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>4</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>5</td>
<td>汽车用品</td>
<td>汽车用品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>读者如需查看完整代码，可参考一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery学习(七)——使用JQ完成下拉列表左右选择
- 如何使用js完成下拉列表左右选择
- Jquery实现下拉列表左右选择
- 一天搞定jQuery(四)——使用jQuery完成省市二级联动的效果
- 一天搞定jQuery(一)——使用jQuery完成定时弹出广告
- 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
- Jquery多选下拉列表插件jquery multiselect功能介绍及使用
- jQuery实现下拉框左右选择的简单实例
- 下拉列表选择移动组件(jquery)
- jQuery实现select下拉框左右选择_交换内容
- EasyUI中包选择按钮的下拉列表的使用方法
- 下拉框自动完成（autocomplete）带有分页功能SutaraLumpur-jquery.ajaxComboBox.js的使用
- asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
- 使用jQuery.AutoComplete完成仿淘宝商品搜索功能(改进了键盘上下选择体验)
- JQuery 使用attr方法实现下拉列表选中
- jquery实现下拉框左右选择的效果
- 下拉框自动完成（autocomplete）带有分页功能SutaraLumpur-jquery.ajaxComboBox.js的使用
- jQuery之下拉框左右选择
- jquery 实现左右下拉列表 选项 移动
- [置顶] 下拉列表选择移动组件(jquery)