<!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. IOS导航器 + 表控制器 常用功能函数/属性

    1. 设置标题栏(顶部)颜色 在表控制器中 e.g -(void)viewDidLoad中添加 self.navigationController.navigationBar.barTintColor ...

  2. python内置函数三

    ord()  函数 和 chr()  相反   chr() 是将数字转换成assci码     ord() 是将字符串转换成assci码 显示 pow() 函数  pow(x,y,z)  表示x**y ...

  3. QQ企业通---DllImport

    1.DllImport 是什么? DllImport是System.Runtime.InteropServices命名空间下的一个属性类,其功能是提供从非托管DLL(托管/非托管是微软的.net fr ...

  4. 12541：TNS无监听状态

    上次在项目上遇见数据库报这个问题,然后网上几乎都是让重新进行配置数据库.配置多次之后还是无效,最后找到了问题的根源. 使用的是Oracle数据库,用PLSQL登录报的这个错误. 在计算机全局搜索:li ...

  5. 洛谷 P3435 [POI2006]OKR-Periods of Words

    题目传送门 解题思路: 这道题题面比较乱,先说一下这道题要求什么: 对于一个字符串,求它及它的所有前缀的一个答案串的长度之和,答案串就是对于一个字符串,找到一个它的一个前缀,这个前缀后面在复制一遍,得 ...

  6. obtainFreshBeanFactory方法源码跟踪

    看这篇文章之前可以先了解之前的跟踪流程,https://www.jianshu.com/p/4934233f0ead 代码过宽,可以shift + 鼠标滚轮 左右滑动查看 AbstractApplic ...

  7. Java虚拟机05.2（内存分配）

    jdk1.7中堆内存分为:年轻代+老年代+永久代.但是永久代有作为非堆内存存在,也就是说堆内存的大小应该为年轻代+老年代.在tomcat容器中,如果jsp页面过多可能出现永久代溢出.通常栈溢出都是程序 ...

  8. Spring Boot-运行部署

    Main方法 直接运行启动类main方法 遵循应用程序入口点的Java约定的标准方法.我们的main方法SpringApplication通过调用委托给Spring Boot的类run. Spring ...

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

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

  10. 007.Oracle数据库 , 使用%进行模糊查询

    /*Oracle数据库查询日期在两者之间*/ SELECT PKID, OCCUR_DATE, ATA FROM LM_FAULT WHERE ( ( OCCUR_DATE >= to_date ...