jQuery 对多选下拉框的简单应用
jQuery 对多选下拉框的简单应用
参考资料：
《锋利的jQuery》 作者：
单东林 张晓菲 魏然 出版社: 人民邮电出版社
页面初始化后效果如图：
代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
//点击"添加"事件
$("#add").click(function() {
$("#selectLeft :selected").appendTo("#selectRight");
});
//点击"添加全部"事件
$("#addAll").click(function() {
$("#selectLeft option").appendTo("#selectRight");
});
//点击"删除"事件
$("#remove").click(function() {
$("#selectRight :selected").appendTo("#selectLeft");
});
//点击"删除全部"事件
$("#removeAll").click(function() {
$("#selectRight option").appendTo("#selectLeft");
});
//双击左选择框事件
$("#selectLeft").dblclick(function() {
$("#selectLeft :selected").appendTo("#selectRight");
});
//双击右选择框事件
$("#selectRight").dblclick(function() {
$("#selectRight :selected").appendTo("#selectLeft");
});
});
</script>
<!-- CSS -->
<style type="text/css">
.content {
position: absolute;
top: 10px;
width: 170px;
text-align: center;
}
select {
height: 160px;
width: 150px;
}
</style>
</head>
<!-- HTML -->
<body>
<div class="content">
<select id="selectLeft" multiple="multiple">
<option value="1">The Story Of Us</option>
<option value="2">Mary's Song</option>
<option value="3">Long Time Coming</option>
<option value="4">Speak Now</option>
<option value="5">Sparks Fly</option>
<option value="6">My Cure</option>
<option value="7">Fifteen</option>
<option value="8">Hey Stephen</option>
</select>
<div>
<button id="add">添加选中项到右边>></button><br />
<button id="addAll">添加全部项到右边>></button>
</div>
</div>
<div class="content" style="left: 180px;">
<select id="selectRight" multiple="multiple"></select>
<div>
<button id="remove"><<删除选中项到左边</button><br />
<button id="removeAll"><<删除全部项到左边</button>
</div>
</div>
</body>
</html>
《锋利的jQuery》 作者： 单东林 张晓菲 魏然 出版社: 人民邮电出版社
页面初始化后效果如图：
代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
//点击"添加"事件
$("#add").click(function() {
$("#selectLeft :selected").appendTo("#selectRight");
});
//点击"添加全部"事件
$("#addAll").click(function() {
$("#selectLeft option").appendTo("#selectRight");
});
//点击"删除"事件
$("#remove").click(function() {
$("#selectRight :selected").appendTo("#selectLeft");
});
//点击"删除全部"事件
$("#removeAll").click(function() {
$("#selectRight option").appendTo("#selectLeft");
});
//双击左选择框事件
$("#selectLeft").dblclick(function() {
$("#selectLeft :selected").appendTo("#selectRight");
});
//双击右选择框事件
$("#selectRight").dblclick(function() {
$("#selectRight :selected").appendTo("#selectLeft");
});
});
</script>
<!-- CSS -->
<style type="text/css">
.content {
position: absolute;
top: 10px;
width: 170px;
text-align: center;
}
select {
height: 160px;
width: 150px;
}
</style>
</head>
<!-- HTML -->
<body>
<div class="content">
<select id="selectLeft" multiple="multiple">
<option value="1">The Story Of Us</option>
<option value="2">Mary's Song</option>
<option value="3">Long Time Coming</option>
<option value="4">Speak Now</option>
<option value="5">Sparks Fly</option>
<option value="6">My Cure</option>
<option value="7">Fifteen</option>
<option value="8">Hey Stephen</option>
</select>
<div>
<button id="add">添加选中项到右边>></button><br />
<button id="addAll">添加全部项到右边>></button>
</div>
</div>
<div class="content" style="left: 180px;">
<select id="selectRight" multiple="multiple"></select>
<div>
<button id="remove"><<删除选中项到左边</button><br />
<button id="removeAll"><<删除全部项到左边</button>
</div>
</div>
</body>
</html>