学习内容：

需求

用 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. 接口自动化测试框架（Java 实现）

    目录 需求分析 开发设计 分层与抽象 技术选型 主要类设计 测试文件设计 工程目录设计 工程实现 github 地址 运行示例 需求分析 需求点 需求分析 通过 yaml 配置接口操作和用例 后续新增 ...

  2. linux curl 的用法指南

    curl用法指南

  3. Laravel消息队列怎么使用

    使用database驱动做队列 下面是简单使用教程 1. 修改.env文件配置 QUEUE_CONNECTION=sync改成QUEUE_CONNECTION=database 默认的sync是同步队 ...

  4. Java基础：ThreadLocal及其原理

    ThreadLocal的用处 ThreadLocal是一个多线程的辅助工具类,目的是方便开发者维护多线程中的共享变量.我们知道如果我们想要在一个线程中一直访问一个变量或者在线程上下文中保存一个变量,我 ...

  5. Redhat7 安装 yum源（亲测有效）

    由于之前安装Redhat7 想安装vsftpd  使用yum   install vsftpd 报错: This system is not registered to Red Hat Subscri ...

  6. IDEA版部署离线ArcGIS api for JavaScript

    痛苦!折磨! 这两天发现IDEA 做ArcGIS api 开发比EClipse好用(重点是没有JS提示).但引入的ArcGIS api 一直报错,说找不到.这两天思来想去就是不知道为什么找不到loca ...

  7. Azure DevOps (五) 推送流水线制品到流水线仓库

    上一篇我们成功创建了我们的第一条流水线,并且配置了阿里云的maven加速,这篇文章我们来研究一下如何把编译好的代码上传到azure的流水线制品仓库中 为后续我们进行发布做准备 首先打开我们上一次编辑的 ...

  8. 前端知识之css样式

    前端之CSS样式 css介绍 css是为html标签设置样式的 css由选择器和声明组成 声明包括属性和属性值 声明之间用分号:隔开 css注释 /注释类容/ css的几种引入方式 行内样式 不推荐使 ...

  9. Rust极简教程

    目录 简介 特性 特征 用途 安装 核心组件 常用命令 基础语法 数据类型 标量类型 复合类型 示例 条件语句 循环 输出&输入 输出 输出花括号 输出非基础类型 输入 所有权 切片 结构体 ...

  10. Zookeeper 的典型应用场景 ?

    Zookeeper 是一个典型的发布/订阅模式的分布式数据管理与协调框架,开发人员 可以使用它来进行分布式数据的发布和订阅. 通过对 Zookeeper 中丰富的数据节点进行交叉使用,配合 Watch ...