1.下载jQuery，并导入：https://blog.csdn.net/weixin_44718300/article/details/88746796

2.代码实现：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<!--

			步骤:

				1. 导入JQ的文件

				2. 文档加载函数 :页面初始化

				3.确定事件 :　点击事件　onclick

				4. 事件触发函数

					1. 移动被选中的那一项到右边

		-->

		<script type="text/javascript" src="../js/jquery-3.3.1.js.css" ></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>

					<!--左边-->

					<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>

		</table>

	</body>

</html>

jQuery元素的左右移动的更多相关文章

  1. 深入学习jQuery元素过滤

    × 目录 [1]索引过滤 [2]内容过滤 前面的话 过滤是jQuery扩展的一个重要的内容.jQuery选择器中的一个重要部分就是过滤选择器.除了过滤选择器,还有专门的元素过滤的方法.本文将详细介绍j ...

  2. jquery元素插入、删除、清空

    1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...

  3. 获取元素的xpath, 转换xpath为csspath进行jQuery元素获取

    获取元素的xpath, 转换xpath为csspath进行jQuery元素获取 博客分类: 编程心得 jQueryCSSHTML  var $shadow = new Object(); /** 获取 ...

  4. JQuery元素获取

    前言:这是本类别博文JQuery即用即查开篇. 因为查手册太麻烦,而且有时候需要深入命令所在详细页面才能了解此命令的具体作用是什么. 写这几篇文章就是为了,工作遇到问题时,一看这几篇文章就可以查到哪个 ...

  5. jquery元素定位方法

    用chrome浏览器打开页面,按f12调出开发者调试模式,查看elements,部分代码如下图所示,注意红框部分 假设我们要查找某些元素的位置,用鼠标移到那部分元素,调试器会自动用蓝颜色标示选中部分的 ...

  6. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  7. javascript 常见数组操作（ 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方）

    主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...

  8. jquery元素插入、删除、清空、找父子级元素

    1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...

  9. jquery元素节点操作

    jquery元素节点操作 创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入 ...

  10. [Web 前端] 029 jQuery 元素的“节操”

    目录 jQuery 元素的节点操作 1. 创建节点 2. 插入节点 2.1 在现存元素的内部,从后面插入元素 2.2 在现存元素的内部,从前面插入元素 2.3 在现存元素的外部,从后面插入元素 2.4 ...

随机推荐

  1. Day 1：思考

    干游戏这行从实习到工作算起来也有快7年的时间了, 7年的时间~上学了.毕业了.工作了.结婚了.孩子要出生了~ 也算是经历了不少的事情了,自己觉得生活过的是越来越好了, 自己做过的游戏也不算少了,不过真 ...

  2. 使用loadrunner监控apcahe资源

    一般要修改的内容在Httpd.conf文件中已经存在,如果不存在请自行添加相应内容. (1)修改Apache中Httpd.conf文件, (2)添加ExtendedStatus,设置ExtendedS ...

  3. vSphere 计算vMotion的迁移原理

    1. 计算vMotion 的应用场景 1). 计划内停机维护 2). 提高资源的利用率 2. 计算vMotion 需求: 1).共享存储 vMotion需要解决的核心问题就是:将VMs的内存从源ESX ...

  4. linux服务器常用操作和命令

    1. 什么是linux服务器load average? Load是用来度量服务器工作量的大小,即计算机cpu任务执行队列的长度,值越大,表明包括正在运行和待运行的进程数越多.参考资料:http://e ...

  5. python format使用方法

    #使用format 方法进行格式化 print("The number {1:} in hex is: {1:#x}, the number {0:} in oct is {0:o}&quo ...

  6. Java笔记--集合

    1.Java集合类可以用于存储数量不等的多个对象,还可以用于保存具有映射关系的关联数组. 2.Java集合可分为Collection和Map两种体系: --Collection:1)Set:元素无序. ...

  7. openCV 3.4 windows下的配置说明

    链接: https://pan.baidu.com/s/1dkS_G8ZSBD8EnhYeEFZxhQ 密码: xu99 (从官网下的, 但360会提示有毒, 哈哈哈) 运行exe, 解压openCV ...

  8. 2019年第十届蓝桥杯【C++省赛B组】

    试题 A: 组队 本题总分:5 分 作为篮球队教练,你需要从以下名单中选出 1 号位至 5 号位各一名球员,组成球队的首发阵容.每位球员担任 1 号位至 5 号位时的评分如下表所示.请你计算首发阵容 ...

  9. Apache http 包中的常量

    org.apache.* org.apache.http.Consts public static final int CR 13 public static final int HT 9 publi ...

  10. Django null=True和blank=True的区别

    今天遇到一个问题: 在restframework框架中开发,数据库了创建了一个model的属性如下所示: remarks = models.CharField(verbose_name=u" ...