jQuery 对多选下拉框的简单应用

最新推荐文章于 2024-06-28 16:12:55 发布

aimartt

最新推荐文章于 2024-06-28 16:12:55 发布

阅读量2.4k

点赞数

分类专栏： jQuery 文章标签： jquery function button div html string

本文链接：https://blog.csdn.net/aimartt/article/details/7872472

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>

aimartt

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery 对多选下拉框的简单应用

jQuery 对多选下拉框的简单应用参考资料：《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社页面初始化后效果如图：代码如下：<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getSe
复制链接

扫一扫

专栏目录