学习内容：

需求

用 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. 二级py--day1

    1.py基础篇 解释:因为在python语言中存在一个不确定尾数问题. 因为浮点数是以二进制形式储存在计算机内部的,受限于宽度,二进制数并不完全等于其浮点数本身,只能说接近.所以0.1+0.2==0. ...

  2. TLS 1.0 至 1.3 握手流程详解

    概述 TLS 全称为 Transport Layer Security(传输层安全),其前身是 SSL,全称为 Secure Sockets Layer(安全套接字层),它的作用是为上层的应用协议提供 ...

  3. Java中获取applicationcontext(应用上下文)

    package com.wl.iwbservice.util; import org.springframework.beans.BeansException; import org.springfr ...

  4. 知识点简单总结——Lyndon分解

    知识点简单总结--Lyndon分解 Lyndon串 定义:一个字符串的最小后缀就是整个串本身. 等效理解:这个串为其所有循环表示中最小的. Lyndon分解 定义:将字符串分割为 $ s_{1} s_ ...

  5. sftp服务器搭建以及挂载新硬盘到home目录下

    前言 我身边一直有一个空闲不用的硬盘,一直空闲不用,闲暇的时候想到为什么不用起来呢,于是想起来搭建一个sftp服务器,当做云盘用了 搭建sftp服务器 SFTP称作"安全的FTP" ...

  6. dev编译器兼容设置及字符串的识别问题

    #include<bits/stdc++.h> using namespace std; bool cmp(char a,char b) { return a>b; } //int ...

  7. 分布式锁redis

    1. 首先看这篇文章中  https://mp.weixin.qq.com/s/s-ozSjM5WmSUopxttSWYeQ 为什么redis能实现锁功能呢,看下图,redis命令窗口中,setnx  ...

  8. SpringBoot和SpringCloud的区别？

    SpringBoot专注于快速方便的开发单个个体微服务. SpringCloud是关注全局的微服务协调整理治理框架,它将SpringBoot开发的一个个单体微服务整合并管理起来, 为各个微服务之间提供 ...

  9. Java中带参数的方法和JavaScript中带参数的函数有什么不同？

    javascript是动态语言,是弱类型语言,其参数的使用很灵活:java则是强类型语言,参数的类型必须明确的

  10. kafka指定partiton生产

    kafka发送一个消息的时候需要封装成一个ProducerRecord : public ProducerRecord(String topic, Integer partition, Long ti ...