JS实现列表移动（通过DOM操作select标签）
学习内容：
需求
用 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标签）的更多相关文章
- 关于js封装框架类库之DOM操作模块（二）
上一篇基本实现了框架结构,但是与真正能用上的项目框架比较还是存在很多不足,在这又做了些加强与优化 (function ( window, undefined ) { var arr = [], pus ...
- 从JS和jQuery浅谈DOM操作，当我们在获取时，究竟获取了什么
0.写在前面的话 自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一 ...
- 关于js封装框架类库之DOM操作模块（一）
在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,而对其封装就是为了更好地进行DOM操作,提高浏览器的支持效率 现在给出一个案例:页面创建三个div,然后给其添加样式 ...
- JS操作select标签
主要利用这个来实现省市区三级联动的 我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速 ...
- Dom操作（标签--增、删、移动）
Dom操作 移动或者插入标签的方法 1.append()和appendTo():在现存元素的内部,从后面放入元素: 先声明一个变量用来保存新标签 var $span = $('这是一个span元素') ...
- Jquery操作select标签的常用方法
<select id="search"> <option value='1'>baidu</option> <option value=' ...
- js创建dom操作select
document.getElementById("column-left").getElementsByTagName("header")[0].onclick ...
- JS中的事件以及DOM 操作
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- 原生JS实现几个常用DOM操作API
原生实现jQuery的sibling方法 <body> <span>我是span标签</span> <div>我是一个div</div> & ...
随机推荐
- CA周记 2022年的第一课 - Rust
现代编程语言有很多,在我的编程学习里面有小学阶段的 LOGO , 中学阶段的 Pascal ,也有大学阶段的 C/C++.Java..NET,再到工作的 Objective-C .Swift.Go.K ...
- Clickhouse中的预聚合引擎
作者: LemonNan 原文地址: https://mp.weixin.qq.com/s/qXlmGTr4C1NjodXeM4V9pA 注: 转载需注明作者及原文地址 介绍 本文将介绍 Clickh ...
- pandas常用操作详解——pandas的去重操作df.duplicated()与df.drop_duplicates()
df.duplicated() 参数详解: subset:检测重复的数据范围.默认为数据集的所有列,可指定特定数据列: keep: 标记哪个重复数据,默认为'first'.1.'first':标记重复 ...
- OpenCascade极简环境搭建（QT环境）
现在网上关于OpenCascade(OCCT)的环境搭建几乎都是下载源码,然后实时MinGW来编译生成源码.但是,官方有提供Windows平台下的可执行文件,如果想快速了解OpenCascade(OC ...
- ArcMap操作随记（6）
1.上流汇流区 [填洼]→[流向]→[分水岭] 2.输入坐标进行移动,也就是精确移动 [移动]工具(在自定义中,其中的[旋转]工具也有类似效果) 3.找最近的要素(矢量) [近邻分析]→[汇总] 4. ...
- 搭建Loki、Promtail、Grafana轻量级日志系统（centos7）
搭建Loki.Promtail.Grafana轻量级日志系统(centos7)--简称PLG 需求 公司项目采用微服务的架构,服务很多,每个服务都有自己的日志,分别存放在不同的服务器上.当查找日志时需 ...
- OpenCV开发笔记（七十四）：OpenCV3.4.1+ffmpeg3.4.8交叉编译移植到海思平台Hi35xx平台
前言 移植opencv到海思平台,opencv支持对视频进行解码,需要对应的ffmpeg支持. Ffmpeg的移植 Ffmpeg的移植请参考之前的文章:<FFmpeg开发笔记(十): ...
- 【论文阅读】CVPR2021: MP3: A Unified Model to Map, Perceive, Predict and Plan
Sensor/组织: Uber Status: Reading Summary: 非常棒!端到端输出map中间态 一种建图 感知 预测 规划的通用框架 Type: CVPR Year: 2021 引用 ...
- 用C语言读写数据
//1-5题 #include "stdio.h" typedef struct { char name[10];//姓名 int subject1,subject2,subjec ...
- python模块相互依赖的解决方案
第一种:将相互依赖的文件中的其中一个文件的代码移植到另一个文件中... 第二种:将 import .... 或 from ... import 语句的位置移动到def函数内部,由于import和fro ...