javascript操作多选下拉列表
闲来无事，把javascript操作多选下拉列表有关的操作知识复习了一遍，代码附上
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2014/8/9
Time: 18:05
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>多选下拉列表</title>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0"
style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select name="first" multiple="multiple" size=10 class="td3" id="s">
<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>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->"/>
<input name="add_all" id="add_all" type="button" class="button" value="==>"/>
<input name="remove" id="remove" type="button" class="button" value="<--"/>
<input name="remove_all" id="remove_all" type="button" class="button" value="<=="/>
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
<script language="JavaScript">
//dom结构绘制完毕，页面的所有关联文件必须加载完毕
window.onload = function () {
//选中的从左边移到右边
document.getElementById("add").onclick = function () {
//左侧
var firstElement = document.getElementById("first");
//右侧
var secondElement = document.getElementById("second");
//获取左侧option
var optionElements = firstElement.getElementsByTagName("option");
var len = optionElements.length;
/**
* firstElement.selectedIndex表示被选中的下标(从0开始)
* 如果未被选中，那么firstElement.selectedIndex=-1
*/
for (var i = 0; i < len; i++) {
if (firstElement.selectedIndex != -1) {
//从左边移到右边
secondElement.appendChild(optionElements[firstElement.selectedIndex]);
}
}
}
//单击左全选
document.getElementById("add_all").onclick = function () {
//左侧
var firstElement = document.getElementById("first");
//右侧
var secondElement = document.getElementById("second");
//获取左侧option
var optionElements = firstElement.getElementsByTagName("option");
var len = optionElements.length;
for (var i = 0; i < len; i++) {
//每次都是移动第一个到右边
secondElement.appendChild(optionElements[0]);
}
}
//双击左边移动到右边
document.getElementById("first").ondblclick = function () {
//左侧
var firstElement = document.getElementById("first");
//右侧
var secondElement = document.getElementById("second");
// //获取左侧option
// var optionElements = firstElement.getElementsByTagName("option");
// //双击的元素移到右边
// secondElement.appendChild(optionElements[firstElement.selectedIndex]);
//第二种方法
secondElement.appendChild(this[this.selectedIndex]);
}
//右边选中，移动到左边
document.getElementById("remove").onclick = function () {
//左侧
var firstElement = document.getElementById("first");
//右侧
var secondElement = document.getElementById("second");
//获取右侧option
var optionElements = secondElement.getElementsByTagName("option");
var len = optionElements.length;
for (var i = 0; i < len; i++) {
if (-1 != secondElement.selectedIndex) {
firstElement.appendChild(optionElements[secondElement.selectedIndex])
}
}
}
//单击右全选
document.getElementById("remove_all").onclick = function () {
//左侧
var firstElement = document.getElementById("first");
//右侧
var secondElement = document.getElementById("second");
//获取右侧option
var optionElements = secondElement.getElementsByTagName("option");
var len = optionElements.length;
for (var i = 0; i < len; i++) {
//每次都是移动第一个到右边
firstElement.appendChild(optionElements[0]);
}
}
//双击右侧，右侧元素移动到左侧
document.getElementById("second").ondblclick = function () {
//左侧
var firstElement = document.getElementById("first");
//右侧
var secondElement = document.getElementById("second");
//获取右侧option
var optionElements = secondElement.getElementsByTagName("option");
firstElement.appendChild(optionElements[secondElement.selectedIndex]);
}
}
</script>
</html>
javascript操作多选下拉列表的更多相关文章
- javascript 操作复选框无效
<script type="text/javascript"> // 操作checkbox复选框按钮 var inputs = $('#article_list').f ...
- 对jquery操作复选框
摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...
- JavaScript：复选框事件的处理
复选框事件的处理 复选框本身也是多个组件的名字相同.所以在定义复选框的同事依然要使用document.all()取得全部的内容. 范例:操作复选框,要求是可以一个个去选择选项,也可以直接全选,全选按钮 ...
- 一款不错的多选下拉列表利器—— Ext.ux.form.SuperBoxSelect
在B/S系统中,下拉列表(select/dropdownlist/combobox)的应用随处可见,为了增强用户体验,开发人员也常常会做一些带联想功能的下拉列表, 特别是数据项比较多的时候,用户筛选起 ...
- Flex4 双选下拉列表的实现（源代码）
本文属原创文章,如需转载,请注明出处,谢谢 企业应用中少不了双选下拉列表控件,但几乎都没有独立的控件,Flex在这上面得天独厚,ArrayCollection的过滤功能使得我们只需要一个数据源就可以将 ...
- Python javascript操作DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- JavaScript 实现全选 / 反选功能
JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...
随机推荐
- Hyperledger Fabric【区块链学习一】
Hyperledger Fabric 学习 什么是区块链 什么是区块链在我们没有接触的时候,只知道它是一个去中心化的存储方式.当我们发生交易,或者动作的时候我们会将记录通知给所有参与者共同维护,达到去 ...
- BIGI行情-实时行情数据源接口websocket接入方法
BIGI行情-实时行情数据源接口socket接入方法1.国际期货.国内期货.外汇.贵金属.现货.期权.股指.数字货币和A股实时行情和历史行情2.推送的有:socket,websocket,http接收 ...
- Linux服务器上创建新用户
一.在/home目录下新建userName目录 sudo useradd -m -s /bin/bash userName 二.设置密码 sudo passwd userName
- 如何使用SPSSAU计算耦合协调度？
什么是耦合协调度模型 耦合协调度模型用于分析事物的协调发展水平.耦合度指两个或两个以上系统之间的相互作用影响,实现协调发展的动态关联关系,可以反映系统之间的相互依赖相互制约程度.协调度指耦合相互作用关 ...
- ACM集训第一次积分赛赛前复习+day4
不知不觉4天过去了,我们迎来了我们第一次积分赛,赛前的四天我们学了以下知识点吧: day 1.排序 之前一直想用qsort,但是总是写不明白,STL的sort()可以说是很方便了. 先写一个最基础的数 ...
- 迷上我成真恋爱学心理学挽回她PDF文档资料完整版情感技巧脱单教程
迷上我成真恋爱学心理学挽回她PDF文档资料完整版情感技巧脱单教程 成真迷上我偷听女人心挽回她课程 百度网盘迷上我教程pdf地址 百度网盘挽回她教程pdf+视频的地址 备用地址淘宝百度网盘发货地址 百度 ...
- GitBook 常用插件
目录 必看说明 插件说明 page-treeview 目录 code 代码 pageview-count 阅读量计数 popup 图片点击查看 tbfed-pagefooter 页面添加页脚(简单版) ...
- 学习一下 JVM （三） -- 了解一下 垃圾回收
一.简单了解几个概念 1.什么是垃圾(Garbage)?什么是垃圾回收(Garbage Collection,简称 GC)? (1)什么是垃圾(Garbage)? 这里的垃圾 指的是 在程序运行过程中 ...
- Laravel Reponse 响应客户端
Laravel Response 响应客户端 本篇文章逻辑较长,只说明和响应生命周期相关的必要代码. 本文主要内容顺序为: 1.执行上文管道中的then方法指定的闭包,路由的分发 2.在路由器中(Ro ...
- iOS NSOperation
iOS NSOperation 一.简介 除了,NSThread和GCD实现多线程,配合使用NSOperation和NSOperationQueue也能实现多线程编程 NSOperation和NSOp ...