jQuery完成下拉列表左右选择

酷爱WAF哈狗帮

于 2019-10-27 14:30:55 发布

阅读量130

点赞数

分类专栏： JavaWeb前端

本文链接：https://blog.csdn.net/HuashirenYty/article/details/102766623

版权

JavaWeb前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

leftRightList.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉列表左右选择</title>
		
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		
		<script type="text/javascript">
			$(function() {
				//选中单击去右边
				$("#selectOneToRight").click(function() {
					$("#left option:selected").appendTo($("#right"));
				});
				
				//点击全部去右边
				$("#selectAllToRight").click(function() {
					$("#left option").appendTo($("#right"));
				});
				
				//选中双击去右边
				$("#left option").dblclick(function() {
					$("#left option:selected").appendTo($("#right"));
				});
				
			});
		</script>
	
	</head>
	<body>
		<table border="1" width="600" align="center">
			<tr>
				<td>
					分类名称
				</td>
				<td>
					<input type="text" name="cname" value="手机数码"/>
				</td>
			</tr>
			<tr>
				<td>
					分类描述
				</td>
				<td>
					<textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
				</td>
			</tr>
			<tr>
				<td>
					分类商品
				</td>
				<td>
					<span style="float: left;">
						<font color="green" face="宋体">已有商品</font><br/>
						<select id="left" multiple="multiple" style="width: 100px;height: 200px;" >
							<option>IPhone6s</option>
							<option>小米4</option>
							<option>锤子T2</option>
						</select>
						<p><a id="selectOneToRight" href="#" style="padding-left: 20px;" >&gt;&gt;</a></p>
						<p><a id="selectAllToRight" href="#" style="padding-left: 20px;" >&gt;&gt;&gt;</a></p>
					</span>
					<span style="float: right;">
						<font color="red" face="宋体">未有商品</font><br/>
						<select id="right" multiple="multiple" style="width: 100px;height: 200px;" >
							<option>三星Note3</option>
							<option>华为6s</option>
						</select>
						<p><a href="#" >&lt;&lt;</a></p>
						<p><a href="#" >&lt;&lt;&lt;</a></p>
					</span>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type='submit' value="修改"/>
				</td>
			</tr>
		</table>
	</body>
</html>

酷爱WAF哈狗帮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery完成下拉列表左右选择

leftRightList.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>下拉列表左右选择</title> <script type="text/javascript" src="../js/jquery-1.8....
复制链接

扫一扫