jQuery_review之jQuery实现左右多选内容交换
浏览数：14 /
时间：2015年06月09日
在HTML中，通过Select设置multiple=“multiple”设置当前的框为多选框，也就意味着可以同时选择多个内容。在我们的系统中经常可以看到左右两侧的选择，甚至在腾讯的应用中，都有很多类似的功能实现。这种功能是非常实用的，就可以将它封装为一个标签，然后设置两个LIST进行内容的互换，这些对于项目组的快速开发是非常有帮助的，因为JSP的功能就是在于丰富的可以扩展的标签，难道不是么？
在这个小的复习里面，一个简单的要注意的点就是，对于下拉选单的内容的筛选，是通过：selected来实现的，一定将这个内容和多选框的attr("checked")区分开。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var opArea = $("div.dSelectOpArea");
opArea.find(".dSelectAllRight").click(function(){
$("#select1 option").remove().appendTo($("#select2"));
});
opArea.find(".dSelectAllLeft").click(function(){
$("#select2 option").remove().appendTo($("#select1"));
});
opArea.find(".dSelectOneRight").click(function(){
$("#select1 option:selected").remove().appendTo($("#select2"));
});
opArea.find(".dSelectOneLeft").click(function(){
$("#select2 option:selected").remove().appendTo($("#select1"));
});
})
</script>
<style type="text/css">
div.dSelectOpArea{
height:120px;
width:60px;
}
div.dSelectOpArea button{
width:60px;
margin-top:5px;
}
table.dbSelectContainer{
width:240px;
height:120px;
}
#select1,#select2{
width:80px;
height:120px;
}
</style>
</head>
<body>
<form action="#">
<table class="dbSelectContainer">
<tr>
<td>
<select multiple="multiple" id="select1">
<option value="oracle">oracle</option>
<option value="java">java</option>
<option value="english">english</option>
<option value="pmp">pmp</option>
<option value="javascript">javascript</option>
<option value="php">php</option>
<option value="Xplatform">Xplatform</option>
</select>
</td>
<td>
<div class="dSelectOpArea">
<button class="dSelectAllRight">>></button>
<button class="dSelectAllLeft"><<</button>
<button class="dSelectOneRight">></button>
<button class="dSelectOneLeft"><</button>
</div>
</td>
<td>
<select multiple="multiple" id="select2">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
