JavaScript操作select下拉框选项移动
运行结果：
源代码：
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8">
5 <title>选项移动</title>
6 </head>
7 <body>
8 <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0"
9 style="margin: 15px 0px 0px 15px;">
10 <tr>
11 <td width="126">
12 <!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
13 <select name="first" multiple="multiple" size=10 class="td3" id="s">
14 <option value="选项1">选项1</option>
15 <option value="选项2">选项2</option>
16 <option value="选项3">选项3</option>
17 <option value="选项4">选项4</option>
18 <option value="选项5">选项5</option>
19 <option value="选项6">选项6</option>
20 <option value="选项7">选项7</option>
21 <option value="选项8">选项8</option>
22 </select>
23 </td>
24 <td width="69" valign="middle">
25 <input name="add" id="add" type="button" class="button" value="-->"/>
26 <input name="add_all" id="add_all" type="button" class="button" value="==>"/>
27 <input name="remove" id="remove" type="button" class="button" value="<--"/>
28 <input name="remove_all" id="remove_all" type="button" class="button" value="<=="/>
29 </td>
30 <td width="127" align="left">
31 <select name="second" size="10" multiple="multiple" class="td3" id="second">
32 <option value="选项9">选项9</option>
33 </select>
34 </td>
35 </tr>
36 </table>
37 <script type="text/javascript">
38 // 左右两边的select
39 var leftSelect = document.getElementById("s");
40 var leftItems = leftSelect.children;
41 var rightSelect = document.getElementById("second");
42 var rightItems = rightSelect.children;
43 var selectedItems = [];
44
45 // 4个 按钮
46 // 01 -> left2right selected
47 document.getElementById("add").onclick = function () {
48 // todo
49 selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
50 for (var i = 0; i < leftItems.length; i++) {
51 var item = leftItems[i];
52 if (item.selected) {
53 selectedItems.push(item);
54 }
55 }
56 for (var j = 0; j < selectedItems.length; j++) {
57 rightSelect.appendChild(selectedItems[j]);
58 // leftSelect.removeChild(selectedItems[j]); todo ->为什么左边的不需要移除呢？
59 }
60 };
61 // 02 -> left2right all
62 document.getElementById("add_all").onclick = function () {
63 // todo
64 selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
65 // alert(selectedItems.concat(selectedItems,leftItems).length); // todo ->为什么添加之后长度只是1？
66 for (var i = 0; i < leftItems.length; i++) {
67 var item = leftItems[i];
68 selectedItems.push(item);
69 }
70 for (var j = 0; j < selectedItems.length; j++) {
71 rightSelect.appendChild(selectedItems[j]);
72 }
73 };
74 // 03 -> right2left selected
75 document.getElementById("remove").onclick = function () {
76 // todo
77
78 selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
79 for (var j = 0; j < rightItems.length; j++) {
80 var item = rightItems[j];
81 if (item.selected) {
82 selectedItems.push(item);
83 }
84 }
85
86 for (var i = 0; i < selectedItems.length; i++) {
87 leftSelect.appendChild(selectedItems[i]);
88 }
89 };
90 // 04 -> right2left all
91 document.getElementById("remove_all").onclick = function () {
92 // todo
93 selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
94 for (var j = 0; j < rightItems.length; j++) {
95 var item = rightItems[j];
96 selectedItems.push(item);
97 }
98 for (var i = 0; i < selectedItems.length; i++) {
99 leftSelect.appendChild(selectedItems[i]);
100 }
101 };
102
103 // 双击事件
104 leftSelect.ondblclick = function () {
105 // 左边select控件的双击事件
106 // alert(leftSelect.selectedIndex);
107 rightSelect.appendChild(leftItems[leftSelect.selectedIndex]);
108 };
109
110 rightSelect.ondblclick = function () {
111 leftSelect.appendChild(rightItems[rightSelect.selectedIndex]);
112 };
113 </script>
114 <!--<script type="text/javascript" src="js/selectTest.js"></script>-->
115 </body>
116 </html>
JavaScript操作select下拉框选项移动的更多相关文章
- jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- JQuery操作select下拉框
JQuery操作select下拉框 获取Select选择的Text和Value $("#select_id").change(function(){//code...}); //为 ...
- selenium webdriver学习（八）------------如何操作select下拉框(转)
selenium webdriver学习(八)------------如何操作select下拉框 博客分类: Selenium-webdriver 下面我们来看一下selenium webdriv ...
- JavaScript向select下拉框中加入和删除元素
JavaScript向select下拉框中加入和删除元素 1.说明 a 利用append()方法向下拉框中加入元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...
- JavaScript向select下拉框中添加和删除元素
JavaScript向select下拉框中添加和删除元素 1.说明 a 利用append()方法向下拉框中添加元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...
- JavaScript解决select下拉框中的内容太长显示不全的问题
JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...
- JavaScript获取select下拉框中的第一个值
JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- Selenium常用操作汇总二——如何操作select下拉框
下面我们来看一下selenium webdriver是如何来处理select下拉框的,以http://passport.51.com/reg2.5p这个页面为例.这个页面中有4个下拉框,下面演示4种选 ...
- JavaScript获取Select下拉框Option的Value和Text值的方法
Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...
随机推荐
- 矩池云 | 利用LSTM框架实时预测比特币价格
温馨提示:本案例只作为学习研究用途,不构成投资建议. 比特币的价格数据是基于时间序列的,因此比特币的价格预测大多采用LSTM模型来实现. 长期短期记忆(LSTM)是一种特别适用于时间序列数据(或具有时 ...
- k8s命令行web代理神器gotty
目录 介绍 安装 使用示例 -p 指定端口 -c 指定账号密码 -w 支持tty交互 --permit-arguments 支持get参数传参 --random-url 生成随机地址 --reconn ...
- hadoop-SSH免密登录配置
一:配置基础环境 一.修改主机名 修改 master 机器主机名 [root@server ~]# hostnamectl set-hostname master-wzg [root@server ~ ...
- python关于openpyxl的二次开发
from openpyxl import load_workbook class Excel_util: def __init__(self,path): self.path=path # 加载输入路 ...
- Spring Data ElasticSearch的使用
1.什么是Spring Data Spring Data是一个用于简化数据库访问,并支持云服务的开源框架.其主要目标是使得对数据的访问变得方便快捷,并支持map-reduce框架和云计算数据服务. S ...
- 企业网络防范Serv-U的漏洞
很多企业都将自己的网站建立在互联网上,日常有专门的维护人员进行维护,很多时候对网站的更新当然不是直接在服务器上操作,而是将要更新的网页页面通过FTP工具上传到服务器上实现.因此必须要在服务器上搭建起一 ...
- SQL注入手册
英文版:链接: https://sqlwiki.netspi.com/ 中文版:链接: https://pan.baidu.com/s/1WWmjvYYnLC6_nItMVvUVig 密码: e98r ...
- docker学习笔记（4）- 应用数据管理（容器外）
简介 docker storage driver支持了image分层存储和容器可写层的存储管理,使用挂载主机目录的方式可以将数据存储在主机的文件系统上或内存中. 之前学习过镜像的分层存储,以Docke ...
- 让编程更轻松的 7 个 Visual Studio 扩展 : 以下几个扩展，BuildVision可以用
是时候升级你最喜欢的IDE了!在这篇文章中,我将介绍一些我最喜欢的与众不同的 Visual Studio 扩展,是它们让我的日常编程工作变得更加轻松.对于一些明摆着的,例如 ReSharper 和 O ...
- SpringCloudAlibaba 微服务讲解（三）Nacos Discovery-服务治理
3.1 服务治理 先来思考一个问题,通过上一章的操作,我们已经实现微服务之间的调用,但是我们把服务提供者的网络地址(ip,端口)等硬编码到了代码中,这种做法存在许多问题: 一旦服务提供者地址变化,就需 ...