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. [转载]JDK自带的实用工具——native2ascii.exe

    做Java开发的时候,常常会出现一些乱码,或者无法正确识别或读取的文件,原因是编码方式的不一致.native2ascii是sun java sdk提供的一个工具.用来将别的文本类文件(比如*.txt, ...

  2. 模拟实现ES6的set类

    function Set() { var items = {}; // this.has = function(value){ // return value in items; // } this. ...

  3. python-python基础2

    本章内容: 1.列表.元组 2.字典 3.集合 4.文件操作 5.字符编码与转码 一.列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 names= ...

  4. 获取QQ群中的所有群友QQ

    package com.jm.mail.tools; import java.io.BufferedReader; import java.io.IOException; import java.io ...

  5. 编程题：求单链表倒数第k位的值（最后一位为倒数第0位）好未来

    #!/usr/bin/env python class Node(object): def __init__(self,elem,next_=None): self.elem = elem self. ...

  6. oracle 查看表中有多少字段

    select count(*) from user_tab_columns t where t.TABLE_NAME='WPM_CHECK_ORDER'

  7. systemctl常规应用

    以samba为例——常用项 #systemctl   start   smb ——在smb服务没有启动的情况下启动这项服务. #systemctl   restart   smb ——在修该过相应的配 ...

  8. php二位数组排序（按子元素排序）

    array_multisort(array_column($mainTree[$note]["beCalls"], "wtp"), SORT_DESC, arr ...

  9. 洛谷 P5509 派遣

    题目传送门 心路历程: 每想到一种思路,就有一种要做出来的感觉.但一接着想就会发现这种方法有一些极小的问题,但是我没法解决... 于是就再换思路... 最后在请教了出题人神仙zcq之后,终于做出来了 ...

  10. 04.swoole学习笔记--webSocket服务器

    <?php //创建webSocket服务器 $serv=); //获取请求 //on //open 建立连接 $serv:服务器 $request:客户端信息 $serv->on('op ...