使用JQ完成下拉列表左右选择

最新推荐文章于 2021-01-16 21:55:02 发布

无你处、无江湖

最新推荐文章于 2021-01-16 21:55:02 发布

阅读量171

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42675691/article/details/100012224

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

使用JQ完成下拉列表左右选择

需求分析

我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品

技术分析

步骤分析

1. 导入JQ的文件
2. 文档加载函数 :页面初始化
3.确定事件 :　点击事件　onclick
4. 事件触发函数
1. 移动被选中的那一项到右边

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			步骤:
				1. 导入JQ的文件
				2. 文档加载函数 :页面初始化
				3.确定事件 :　点击事件　onclick
				4. 事件触发函数
					1. 移动被选中的那一项到右边
		-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				$("#a1").click(function(){
					//找到被选中的那一项
					//将被选中项添加到右边
					$("#rightSelect").append($("#leftSelect option:selected"));
				});
				
				//将左边所有商品移动到右边
				$("#a2").click(function(){
					$("#rightSelect").append($("#leftSelect option"));
				});
			});
		</script>
	</head>
	<body>
		
		<table border="1px" width="400px">
			<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>华为</option>
							<option>小米</option>
							<option>锤子</option>
							<option>oppo</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>苹果6</option>
							<option>肾7</option>
							<option>诺基亚</option>
							<option>波导</option>
						</select>
						<br />
						<a href="#"> &lt;&lt; </a> <br />
						<a href="#"> &lt;&lt;&lt; </a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="提交"/>
				</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

无你处、无江湖

关注

0
点赞
踩
1

收藏

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

使用JQ完成下拉列表左右选择需求分析我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品技术分析步骤分析1. 导入JQ的文件2. 文档加载函数 :页面初始化3.确定事件 :　点击事件　onclick4. 事件触发函数1. 移动被选中的那一项到右边代码实现<!DOCTYPE html><html> <head...
复制链接

扫一扫