学习内容：

需求

用 JavaScript 实现 select 标签的移动

实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>选择列表</title>

	<script type="text/javascript">

		function moveSelected(src, dest) {

			// 获取想要移动元素的 select 标签的所有 option 子标签

			var srcOpt = document.getElementById(src).options;

			// 获取移动目的地元素的 select 标签

			var destOpt = document.getElementById(dest);

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

				if(srcOpt[i].selected === true) {

					// 把移动标签作为子节点添加到目标节点

					destOpt.appendChild(srcOpt[i]);

				}

			}

		}

		function moveAll(src, dest) {

			// 获取想要移动元素的 select 标签的所有 option 子标签

			var srcOpt = document.getElementById(src).options;

			// 获取移动目的地元素的 select 标签

			var destOpt = document.getElementById(dest);

			// 遍历每一个 option 子标签

			// 需要倒叙遍历，不然只会移动一部分标签，因为标签元素会向上移动

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

				// 把移动标签作为子节点添加到目标节点

				destOpt.appendChild(srcOpt[i]);

			}

		}

	</script>

</head>

<body>

	<table border="1">

		<tr>

			<td>

				<select id="select1" style="width:100px;height:200px" size="10" multiple="multiple">

					<option value="选项1">选项1</option>

					<option value="选项2">选项2</option>

					<option value="选项3">选项3</option>

					<option value="选项4">选项4</option>

					<option value="选项5">选项5</option>

					<option value="选项6">选项6</option>

					<option value="选项7">选项7</option>

					<option value="选项8">选项8</option>

					<option value="选项9">选项9</option>

				</select>

			</td>

			<td align="center">

				<input type="button" onclick="moveSelected('select1','select2')" value="-->"/><br/>

				<input type="button" onclick="moveAll('select1','select2')" value="==>"/><br/>

				<input type="button" onclick="moveSelected('select2','select1')" value="<--"/><br/>

				<input type="button" onclick="moveAll('select2','select1')" value="<=="/>

			</td>

			<td>

				<select id="select2" style="width:100px;height:200px" size="10" multiple="multiple"></select>

			</td>

		</tr>

	</table>

</body>

</html>

总结：

仅供参考，欢迎讨论交流。

JS实现列表移动（通过DOM操作select标签）的更多相关文章

  1. 关于js封装框架类库之DOM操作模块（二）

    上一篇基本实现了框架结构,但是与真正能用上的项目框架比较还是存在很多不足,在这又做了些加强与优化 (function ( window, undefined ) { var arr = [], pus ...

  2. 从JS和jQuery浅谈DOM操作，当我们在获取时，究竟获取了什么

    0.写在前面的话 自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一 ...

  3. 关于js封装框架类库之DOM操作模块（一）

    在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,而对其封装就是为了更好地进行DOM操作,提高浏览器的支持效率 现在给出一个案例:页面创建三个div,然后给其添加样式 ...

  4. JS操作select标签

    主要利用这个来实现省市区三级联动的 我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速 ...

  5. Dom操作（标签--增、删、移动）

    Dom操作 移动或者插入标签的方法 1.append()和appendTo():在现存元素的内部,从后面放入元素: 先声明一个变量用来保存新标签 var $span = $('这是一个span元素') ...

  6. Jquery操作select标签的常用方法

    <select id="search"> <option value='1'>baidu</option> <option value=' ...

  7. js创建dom操作select

    document.getElementById("column-left").getElementsByTagName("header")[0].onclick ...

  8. JS中的事件以及DOM 操作

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  9. 原生JS实现几个常用DOM操作API

    原生实现jQuery的sibling方法 <body> <span>我是span标签</span> <div>我是一个div</div> & ...

随机推荐

  1. 调用Visual Studio的cl.exe编译C/C++程序

    @ 目录 调用Visual Studio的cl.exe编译C/C++程序 前言 1.查看VS的路径 2.添加环境变量 3.查看设置是否生效 4.配置Notepad++ 调用Visual Studio的 ...

  2. linux下的硬盘分区、格式化、挂载

    linux下的MBR(msdos)分区.格式化.挂载 在linux下,需要使用一块硬盘. 需要进行以下四步: 识别硬盘-----分区规划-----格式化-----挂载 步骤一:分区规划 MBR模式分区 ...

  3. PointNet: Deep Learning on Point Sets for 3D Classification and Segmentation

    摘要 点云是一种重要的几何数据结构类型.由于其不规则的格式,大多数研究人员将此类数据转化为常规的三维体素网格或图像集合.然而,这使数据变得不必要的庞大,并导致问题.在本文中,我们设计了一种新型的直接处 ...

  4. 一比一还原axios源码（三）—— 错误处理

    前面的章节我们已经可以正确的处理正确的请求,并且通过处理header.body,以及加入了promise,让我们的代码更像axios了.这一章我们一起来处理ajax请求中的错误. 一.错误处理 首先我 ...

  5. w10环境vs2017,vs2019配置Opengl快捷方法

    最近,计算机图形学老师向我们布置了任务,配置自己的opengl.百度之后我发现很多教程和方法尝试之后,我发现一种简单的方法来分享给大家. 首先我的软件配置是w10专业版系统+Visual Stdio ...

  6. LGP6011题解

    昨天考试考到了这道题,那就来补一下题解吧. 题意简单不再阐述. 首先删除之后还要向左移动,很容易想到 ODT 平衡树,这个过于一眼,不再阐述. 重点说第二种方法. 向左平移的这个操作,我们是否可以用别 ...

  7. 萌新看过来，你还学不懂VScode插件吗？

    一.前言 VSCode是微软家一个非常轻量化的编辑器,体量虽轻,但是却有异常强大的功能.原因在于VSCode许多强大功能都是基于插件实现的,IDE只提供一个最基本的框架和基本功能,我们需要使用插件来丰 ...

  8. ArcGIS Server创建站点失败Failed to register the activation group

    ArcGIS Server:10.6 解决方法:右键我的电脑-->管理-->服务,重启arcgis server 服务

  9. centOS 7 离线安装 MySQL 5.6 完美安装

    centOS 7 离线安装 MySQL 5.6 centOS 7 离线安装 MySQL 5.6 准备环境 1.离线 centOS 7(此处为 centOS 7 最小安装) 2.nginx 安装文件 ( ...

  10. python中文及符号检测工具带GUI界面

    import tkinter import webbrowser import re #本程序是一个中文字符和中文检测工具 #中文字符自己添加,我只添加了一点 #输入字符串,点击检查文本即可判断有没有 ...