学习内容：

需求

用 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. SpringBoot 搭建基于 MinIO 的高性能存储服务

    1.什么是MinIO MinIO是根据GNU Affero通用公共许可证v3.0发布的高性能对象存储.它与Amazon S3云存储服务兼容.使用MinIO构建用于机器学习,分析和应用程序数据工作负载的 ...

  2. selenium+python操作浏览器

    前面已经把环境搭建好了,下面我们就正式学习selenium的webdriver框架.本篇主要讲如何用Python调用webdriver框架的API,对浏览器做一些基本的操作,如打开.前进.后退.刷新. ...

  3. 4. Java流程控制

    4.Java流程控制 4.1.用户交互Scanner 之前我们学的基本语法中我们并没有实现程序和人的交互,但是Java给我们提供了这样一个工具类,我们可以获取用户的输入.java.util.Scann ...

  4. 华为交换机ACL如何使用及原则

    华为交换机ACL如何使用及原则 转载自:辣条①号  源链接:https://boke.wsfnk.com/archives/480.html   ACL(访问控制列表)的应用原则:标准ACL,尽量用在 ...

  5. 写给开发人员的实用密码学（七）—— 非对称密钥加密算法 RSA/ECC

    本文部分内容翻译自 Practical-Cryptography-for-Developers-Book,笔者补充了密码学历史以及 openssl 命令示例,并重写了 RSA/ECC 算法原理.代码示 ...

  6. CentOS7.5环境下Docker环境搭建

    1. 安装wget工具: yum install wget -y 2. 使用wget工具从docker官网下载yum源: wget -P /etc/yum.repos.d/ https://downl ...

  7. 线程池的极简用法——内置线程池multiprocessing

    大家好,今天博主来分享一个线程池的小捷径--内置线程池的使用方法 一.背景 说道多线程,对变成层有了解的小伙伴一定不陌生,虽然不知道是什么但是也会从各大网站.面试分享等途径听说过.这里就不做过多的介绍 ...

  8. ubuntu21.10搭建jenkins和gitlab自动化部署环境

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 前置环境: vmware pro 16 + ubuntu21.10 安装gitlab 搭建ssh远程 打开终端 sudo apt-get insta ...

  9. Ubuntu下使用C语言连接Mysql 8.0客户端教程

    Ubuntu下如何C语言程序连接MYSQL 8.0(全教程) 1. 安装GCC(略) 2. 安装mysql(本人使用的是最新MySQL 8.0版本) sudo apt install mysql-cl ...

  10. springcloud学习00-开发工具相关准备

    用maven构建springcloud项目,目录结构(图片来源:https://blog.csdn.net/qq_36688143/article/details/82755492) 1.maven ...