<!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. 水费管理系统-ER图和流程图

    ER图:

  2. 洛谷P1351 联合权值

    \(\Large\textbf{Description:}\) \(\large一棵树,父子之间距离为1,求距离为2的两点点权之积的最大值与和.\) \(\Large\textbf{Solution: ...

  3. Python Sphinx使用踩坑记录

    描述 使用 pip 安装sphinx后,按照教程建立了一个新的py文件,如下 # run.py def run(name): """ this is how we run ...

  4. 055、Java中使用for循环输出乘法口诀表

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  5. 009-PHP循环输出数组成员

    <?php $Cities[] = "<B>北京</B>"; //等同于$Cities[0] = "北京" $Cities[] = ...

  6. C# 控制台应用程序从外部传参运行和调试

    参考:/*十有三博客*/ 新建一个用于演示的控制台应用程序项目,然后在Program.cs的入口Main方法里编写如下代码 foreach (var arg in args) { Console.Wr ...

  7. F. Fairness 分硬币最大差值最小

    F. Fairness time limit per test 2.0 s memory limit per test 64 MB input standard input output standa ...

  8. 微信小程序实现左滑删除效果(原生/uni-app)

    实现效果 列表中侧滑删除 删除不同时存在 scrollview上下滑动与侧滑删除不影响 uni-app实现 html部分 <template> <scroll-view :scrol ...

  9. 小米百元NFC智能神器来了：必成爆款！

    6月14日,小米手环4全渠道首卖,其中电商平台今日10:00开卖,线下小米之家需要顾客持本人身份证限购一台. 首销结束后,米家官微宣布,小米手环4下一轮开售时间在6月18日上午10:00,届时小米手环 ...

  10. 【pwnable.kr】input

    这道题是一道一遍一遍满足程序需求的题. 网上其他的题解都是用了C语言或者python语言的本地调用,我想联系一下pwntools的远程调用就写了下面的脚本, 执行效果可以通过1~4的检测,到最后soc ...