六、案例：使用jQuery完成下列列表左右选择

最新推荐文章于 2022-08-12 19:04:26 发布

岩流

最新推荐文章于 2022-08-12 19:04:26 发布

阅读量140

点赞数

分类专栏： jQuery 文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_43470419/article/details/89300156

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.知识点

在JQ对象内容的最后面添加另一个JQ对象：JQ对象.append(另一个JQ对象);
双击事件：JQ对象.dbclick();
表单对象属性
- 找出select中被选中的那一项：
  - option:selected

2.实现

<html>
	<head>
		<title>商品的左右选择</title>
		<script src="../js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			$(function(){
					$("#a1").click(function(){
						$("#rightSelect").append($("#leftSelect option:selected"));
					});
					$("#a2").click(function(){
						$("#rightSelect").append($("#leftSelect option"));
					});
					$("#leftSelect option").dblclick(function(){
						$("#rightSelect").append($("#leftSelect option:selected"));
					});
			});
		</script>
	</head>
	<body>
		<table border="1px" width="300px">
			<tr>
				<td>分类名称</td>
				<td><input type="text" value="手机数码"/></td>
			</tr>
			<tr>
				<td>分类描述</td>
				<td><input type="text" value="这里都是手机数码"/></td>
			</tr>
			<tr>
				<td>分类商品</td>
				<td>
					<div style="float : left">
						已有商品<br/>
						<select multiple="multiple" id="leftSelect">
							<option>huawei</option>
							<option>xiaomi</option>
							<option>smartisan</option>
							<option>oppo</option>
							<option>vivo</option>
						</select><br />
						<a href="#" id="a1">&gt;&gt;</a><br />
						<a href="#" id="a2">&gt;&gt;&gt;</a>
					</div>
					<div style="float:right">
						未有商品<br/>
						<select multiple="multiple" id="rightSelect">
							<option>iPhone</option>
							<option>HTC</option>
							<option>nokia</option>
							<option>SONY</option>
						</select><br />
						<a href="#">&lt;&lt;</a><br />
						<a href="#">&lt;&lt;&lt;</a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2"><input type="button" value="提交"/></td>
			</tr>
		</table>
	</body>
</html>

岩流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
六、案例：使用jQuery完成下列列表左右选择

1.知识点在JQ对象内容的最后面添加另一个JQ对象：JQ对象.append(另一个JQ对象);双击事件：JQ对象.dbclick();表单对象属性找出select中被选中的那一项：option:selected2.实现<html> <head> <title>商品的左右选择</title> <script...
复制链接

扫一扫

专栏目录