学习内容：

需求

用 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. VUE3 之 多个元素之间的过渡 - 这个系列的教程通俗易懂，适合新手

    1. 概述 老话说的好:过去不等于未来,过去成功了不代表将来也会成功,过去失败了也不代表将来也会失败. 言归正传,今天我们聊聊多个元素之间的过渡. 2. 多个元素之间的过渡 2.1 两个元素交替显示 ...

  2. linux文本处理grep

    grep grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具 ...

  3. 微信小程序授权获取手机号

    wxml: <text>pages/logins/logins.wxml</text> // <button open-type="getPhoneNumber ...

  4. laravel报错 : laravel Please provide a valid cache path

    这是因为laravel的缓存路径没有找到 laravel缓存文件路径是在 config/cache.php中设置,默认存在storage文件夹中 'file' => [ 'driver' =&g ...

  5. async-validator 源码学习（一）：文档翻译

    async-validator 是一个表单异步校验库,阿里旗下的 Ant-design 和 Element 组件库中的表单验证使用的都是 async-validator ,目前版本已更新到 4.0.7 ...

  6. C#/VB.NET 将Html转为Excel

    本文介绍通过C#和VB.NET代码展示将Html转为Excel文档的方法. dll引用 方法1 将 Spire.XLS for .NET 下载到本地,解压,安装.完成安装后,在安装路径下找到BIN文件 ...

  7. Java案例——ArrayList存储学生对象并遍历

    package ArrayListDemo;import java.util.ArrayList;import java.util.Scanner;/*案例:存储学生对象并遍历 需求:创建一个存储学生 ...

  8. Docker——dockerfile

    dockerFile介绍 dockerFile是用来构建docker镜像的文件!命令参数脚本! 步骤: 编写dockerFile文件 docker build构建成为一个镜像 docker run运行 ...

  9. 6月28日 Django form组件 和 modelform组件

    Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...

  10. 论文翻译：2021_Joint Online Multichannel Acoustic Echo Cancellation, Speech Dereverberation and Source Separation

    论文地址:https://arxiv.53yu.com/abs/2104.04325 联合在线多通道声学回声消除.语音去混响和声源分离 摘要: 本文提出了一种联合声源分离算法,可同时减少声学回声.混响 ...