1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<!--
  7. 			步骤分析
  8. 				1. 确定事件: 点击事件 :onclick事件
  9. 				2. 事件要触发函数 selectOne
  10. 				3. selectOne要做一些操作
  11. 					(将左边选中的元素移动到右边的select中)
  12. 					1. 获取左边Select中被选中的元素
  13. 					2. 将选中的元素添加到右边的Select中就可以
  14. 		-->
  15. 		<script>
  17. 			function selectOne(){
  18. //				1. 获取左边Select中被选中的元素
  19. 				var leftSelect = document.getElementById("leftSelect");
  20. 				var options = leftSelect.options;
  22. 				//找到右侧的Select
  23. 				var rightSelect = document.getElementById("rightSelect");
  24. 				//遍历找出被选中的option
  25. 				for(var i=0; i < options.length; i++){
  26. 					var option1 = options[i];
  27. 					if(option1.selected){
  28. 		//				2. 将选中的元素添加到右边的Select中就可以
  29. 						rightSelect.appendChild(option1);
  30. 					}
  31. 				}
  32. 			}
  34. 			//将左边所有的商品移动到右边
  35. 			function selectAll(){
  36. //				1. 获取左边Select中被选中的元素
  37. 				var leftSelect = document.getElementById("leftSelect");
  38. 				var options = leftSelect.options;
  40. 				//找到右侧的Select
  41. 				var rightSelect = document.getElementById("rightSelect");
  42. 				//遍历找出被选中的option
  43. 				for(var i=options.length - 1; i >=0; i--){
  44. 					var option1 = options[i];
  45. 					rightSelect.appendChild(option1);
  46. 				}
  47. 			}
  49. 		</script>
  50. 	</head>
  51. 	<body>
  53. 		<table border="1px" width="400px">
  54. 			<tr>
  55. 				<td>分类商品</td>
  56. 				<td>
  57. 					<!--左边-->
  58. 					<div style="float: left;">
  59. 						已有商品<br />
  60. 						<select multiple="multiple" id="leftSelect" οndblclick="selectOne()">
  61. 							<option>华为</option>
  62. 							<option>小米</option>
  63. 							<option>锤子</option>
  64. 							<option>oppo</option>
  65. 						</select>
  66. 						<br />
  67. 						<a href="#" οnclick="selectOne()"> &gt;&gt; </a> <br />
  68. 						<a href="#" οnclick="selectAll()"> &gt;&gt;&gt; </a>
  69. 					</div>
  70. 					<!--右边-->
  71. 					<div style="float: right;">
  72. 						未有商品<br />
  73. 						<select multiple="multiple" id="rightSelect">
  74. 							<option>苹果6</option>
  75. 							<option>肾7</option>
  76. 							<option>诺基亚</option>
  77. 							<option>波导</option>
  78. 						</select>
  79. 						<br />
  80. 						<a href="#"> &lt;&lt; </a> <br />
  81. 						<a href="#"> &lt;&lt;&lt; </a>
  82. 					</div>
  83. 				</td>
  84. 			</tr>
  86. 		</table>
  88. 	</body>
  89. </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. eclipse中maven web项目部署时缺少classes文件或者resources文件

    写这篇博客的原因 问题描述 昨天发现eclipse中maven web项目部署时缺少classes文件或者resources文件 本来以为是很常见的原因, 依次检查"Java Build P ...

  2. IdentityServer4专题之一：OAuth2.0介绍

    1.OAuth 2.0授权方式介绍: OAuth 2.0 的标准是 RFC 6749 文件.该文件先解释了 OAuth 是什么: OAuth 引入了一个授权层,用来分离两种不同的角色:客户端和资源所有 ...

  3. java实现在线预览 - -之poi实现word、excel、ppt转html

    简介 java实现在线预览功能是一个大家在工作中也许会遇到的需求,如果公司有钱,直接使用付费的第三方软件或者云在线预览服务就可以了,例如永中office.office web 365(http://w ...

  4. asp.net获取时间日期插入数据库

    //获取日期+时间 DateTime.Now.ToString(); // 2008-9-4 20:02:10 DateTime.Now.ToLocalTime().ToString(); // 20 ...

  5. mysql5.7.26安装

    h https://www.cnblogs.com/zgqbky/p/11699282.html 张国强(明了) tar -xf mysql-5.7.26-1.el7.x86_64.rpm-bundl ...

  6. 2.Jsoup

    public static void main(String[] args) { //爬取最大资源网上的数据 //用CSS选择器 try { Document doc = Jsoup.parse(ne ...

  7. 5G/NR 波束管理

    原文链接:http://www.sharetechnote.com/html/5G/5G_Phy_BeamManagement.html 1 为什么光束管理/光束控制? 我不认为高频部署中的波束传输信 ...

  8. linux7 安装Docker

    Docker:用白话文简单介绍就是一个集装箱,可以将其运行环境及依赖打包,方便各种场合使用.Docker 让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机 ...

  9. tp5日志分表

    /** * 记录网站日志 * * @return bool */ public function record() { // 组装数据 $log = self::$param; $log[self:: ...

  10. 012、MySQL取本月第一天日期，取每个月的第一天日期

    #取本月第一天 SELECT DATE_ADD( curdate( ), INTERVAL DAY ); #取往后几个月的第一天 , INTERVAL MONTH ); , INTERVAL MONT ...