<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<!--

			步骤分析

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

				2. 事件要触发函数 selectOne

				3. selectOne要做一些操作

					(将左边选中的元素移动到右边的select中)

					1. 获取左边Select中被选中的元素

					2. 将选中的元素添加到右边的Select中就可以

		-->

		<script>

			function selectOne(){

//				1. 获取左边Select中被选中的元素

				var leftSelect = document.getElementById("leftSelect");

				var options = leftSelect.options;

				//找到右侧的Select

				var rightSelect = document.getElementById("rightSelect");

				//遍历找出被选中的option

				for(var i=0; i < options.length; i++){

					var option1 = options[i];

					if(option1.selected){

		//				2. 将选中的元素添加到右边的Select中就可以

						rightSelect.appendChild(option1);

					}

				}

			}

			//将左边所有的商品移动到右边

			function selectAll(){

//				1. 获取左边Select中被选中的元素

				var leftSelect = document.getElementById("leftSelect");

				var options = leftSelect.options;

				//找到右侧的Select

				var rightSelect = document.getElementById("rightSelect");

				//遍历找出被选中的option

				for(var i=options.length - 1; i >=0; i--){

					var option1 = options[i];

					rightSelect.appendChild(option1);

				}

			}

		</script>

	</head>

	<body>

		<table border="1px" width="400px">

			<tr>

				<td>分类商品</td>

				<td>

					<!--左边-->

					<div style="float: left;">

						已有商品<br />

						<select multiple="multiple" id="leftSelect" οndblclick="selectOne()">

							<option>华为</option>

							<option>小米</option>

							<option>锤子</option>

							<option>oppo</option>

						</select>

						<br />

						<a href="#" οnclick="selectOne()"> &gt;&gt; </a> <br />

						<a href="#" οnclick="selectAll()"> &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>

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

  1. 原生JS元素怎么取消事件

    关于原生JS元素怎么取消事件,有3种方式 常规方法:removeEventListener 案例: <body> <div id="myDIV"> div ...

  2. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  3. SVG.js 元素操作整理（二）-Transform

    一.transform()获取或设置矩阵变换 var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = dr ...

  4. js 元素大小缩放实例

    元素大小缩放是一套连贯事件,按下鼠标不放,拖动鼠标 然后松开. 按下鼠标事件 当按下鼠标时,记录元素大小.鼠标按下的位置.状态位. 拖动鼠标事件 当鼠标拖动时,计算元素调用后的大小. 元素调整后大小 ...

  5. SVG.js 元素操作整理（一）

    一.属性操作Attributes var draw = SVG('svg1').size(300, 300); //attr() 属性操作 //设置属性的值 var rect = draw.rect( ...

  6. js元素绑定事件

    想给一个元素绑定一个方法之后,在绑定一个方法而且不被覆盖 window.onload = function () { alert('a'); } window.onlaod=function(){ a ...

  7. js 元素高度宽度整理

    1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和clie ...

  8. js 元素的各种宽度高度

    一.属性 1.只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和 ...

  9. js···元素的属性

    Div.attributes 是所有标签属性构成的数据集合 Div.classList 是所有class名构成的数组集合 在classList的原型链上看以看到add()和remove(). clie ...

  10. js 元素Dom新建并插入页面createElement

    纯js var o = document.createElement('script'); o.type = 'text/template'; o.id = 'demo'; document.docu ...

随机推荐

  1. python读取csv转换为dataframe

    前言: 由于在处理结构性数据的时候经常会读取本地形如:.xls.xlsx.csv等的数据.所以今天就花了点时间来总结一下利用python读取csv数据并且转换为dataframe的数据框架.话不多说, ...

  2. jmeter之Xpath提取器

    首先创建线程组,添加http请求,具体的设置如图1所示: 图1 然后,再添加后置处理器中的XPath Extractor,具体的参数设置,以及表达式如图2: 图2 可以添加Debug PostProc ...

  3. js 中 一些重要的数组方法

    今天在学Vue的时候,看到了好多JS的数组方法,但是我不知道,我以为是Vue的方法,结果找了半天资料也没找出来,最后才发现这是JS的数组对象方法,于是就想做一下笔记,加深一下印象. Array 对象方 ...

  4. mac安装扩展出现grep: /usr/include/php/main/php.h

    在Mac下执行 sudo phpize时提示: grep: /usr/include/php/main/php.h: No such file or directorygrep: /usr/inclu ...

  5. 第3节 sqoop：3、sqoop的入门测试使用

    3.5. Sqoop的数据导入 “导入工具”导入单个表从RDBMS到HDFS.表中的每一行被视为HDFS的记录.所有记录都存储为文本文件的文本数据(或者Avro.sequence文件等二进制数据) 列 ...

  6. taro中自定义tabbar实现中间图标凸出效果

    遇到的一个需求是在tabbar上有一个凸起的小图标, 但是微信自带的tabbar是没有这个效果的, 无奈,只能使用自定义tabbar,查找了多方文档后发现大多是原生小程序实现, 关于taro文档的少之 ...

  7. python 字典复制(存疑)

    import copy x = {'a':1,'b':[2,3,4]} y = x.copy() z = copy.deepcopy(x) print(x) print(y) print(z) pri ...

  8. python format使用方法

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

  9. Java集合基于JDK1.8的LinkedList源码分析

    上篇我们分析了ArrayList的底层实现,知道了ArrayList底层是基于数组实现的,因此具有查找修改快而插入删除慢的特点.本篇介绍的LinkedList是List接口的另一种实现,它的底层是基于 ...

  10. Python 3.8 新功能【新手必学】

       Python 3.8 是 Python 编程语言的最新主要版本, 它包含许多新功能和优化.   Python 3.8 Python 3.8 的一些新功能包括: 1. 海象运算符   PS:很多人 ...