<!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. Java 变参函数的实现

      Java的变参函数实现实际上参数是一个数组,其简单用法如下 public class variableParamTest { private static void variableParam(O ...

  2. 题解 UVA10298 【Power Strings】

    此题我写的是后缀数组SA解法,如果不会后缀数组的可以跳过本篇blog了. 参考文献:罗穗骞 2009集训队后缀数组论文 前记 最近学后缀数组,肝了不少题,也分出了后缀数组的几个题型,看这题没有后缀数组 ...

  3. 如何给谷歌浏览器安装vue-devtools插件

    感谢原作者:https://www.cnblogs.com/alice-fee/p/8038367.html 安装方法1: 需正常打开chrome商店,搜索vuejs devtools 安装.chro ...

  4. arm linux 移植 ffmpeg 库 + x264

    背景 Ffmpeg 中带有h264的解码,没有编码,需要添加x264.libx264是一个自由的H.264编码库,是x264项目的一部分,使用广泛,ffmpeg的H.264实现就是用的libx264. ...

  5. Heap（堆）的基础知识入门

    堆 逻辑结构: 1   /        \ 1          3 /     \     /    \ 4    5   6      null 物理结构; 1.首先堆是一个完全二叉查找书(Co ...

  6. Phoenix与HBase集成进行数据分析

    安装好Phoenix后配置环境变量 export PHOENIX_PATH=/opt/cloudera/parcels/APACHE_PHOENIX-4.14.0-cdh5.14.2.p0.3expo ...

  7. 拓扑排序--P2881 [USACO07MAR]排名的牛Ranking the Cows

    *传送 FJ想按照奶牛产奶的能力给她们排序.现在已知有N头奶牛(1 ≤ N ≤ 1,000).FJ通过比较,已经知道了M(1 ≤ M ≤ 10,000)对相对关系.每一对关系表示为“X Y”,意指X的 ...

  8. Job for nginx.service failed because the control process exited with error code. See “systemctl stat

    启动nginx服务时如果遇到这个错误 Job for nginx.service failed because the control process exited with error code. ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-repeat

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  10. 学校算法作业X——（日期问题）

    最近一直在忙项目,难得有时间写一下作业,所以断了,现在赶紧续上 题目如下: 日历问题 问题描述 在我们现在使用的日历中, 闰年被定义为能被4整除的年份,但是能被100整除而不能被400整除的年是例外, ...