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> & ...
随机推荐
- 学习linux(centos7)记录的笔记
此随笔用于记录学习<linux鸟哥的私房菜>过程中1.遇到的问题及解决的过程 2.有必要记录的重要内容 3.对应书上操作的记录 开始于2021年6月18号 一个磁盘的分区通过格式化后成为一 ...
- 调用Visual Studio的cl.exe编译C/C++程序
@ 目录 调用Visual Studio的cl.exe编译C/C++程序 前言 1.查看VS的路径 2.添加环境变量 3.查看设置是否生效 4.配置Notepad++ 调用Visual Studio的 ...
- Python中的super().__init__()
Python里的super().init()有什么用? 简单的说super().__init__(),就是继承父类的init方法,同样可以使用super()去继承其他方法. 下面是三种不同的继承.调用 ...
- Linux——vi命令详解
转载 Linux--vi命令详解 原文链接:https://blog.csdn.net/cyl101816/article/details/82026678 vi编辑器是所有Unix及Linux系 ...
- 04 变量 变量作用域 常量final 变量的命名规范
变量 变量是什么:就是可以变化的量! Java是一种强类型语言,每个变量都必须声明其类型. Java变量是程序中最基本的存储单元,其要素包括变量名,变量类型和作用域. 注意事项: 每个变量都有类型,类 ...
- IBM QRadar Advisor 安全限制绕过漏洞
受影响系统:IBM QRadar Advisor 1.0.0 -2.4.0描述:CVE(CAN) ID: CVE-2019-4556 IBM QRadar Advisor是一套安全威胁分析解决方案. ...
- Spring——初识
1.1 使用 导包:Spring Web MVC(maven) <!-- https://mvnrepository.com/artifact/org.springframework/sprin ...
- 更新或添加properties文件（保留存在的properties文件的原有格式）
转载: https://www.cnblogs.com/wangzhisdu/p/7815549.html import java.io.BufferedWriter; import java.io. ...
- FusionCube 9000 虚拟化之数据库场景（虚拟化超融合基础设施）
1.本场景为fusioncube9000虚拟化场景,带两台dbn节点. 配置清单: 1台cna节点 2台dbn节点,部署数据库操作系统,一般安装oracle数据双机. 2台mcna节点,作为管理节点, ...
- 羽夏笔记——Hook攻防基础
写在前面 本笔记是由本人独自整理出来的,图片来源于网络.本人非计算机专业,可能对本教程涉及的事物没有了解的足够深入,如有错误,欢迎批评指正. 如有好的建议,欢迎反馈.码字不易,如果本篇文章有帮助你 ...