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 ...
随机推荐
- IDEA编写Scala代码时自动显示变量类型
设置方法如下:settins -->Editor--> Code Style --> scala --Type Annotations 勾选框选部分 测试效果
- JDBC API阐述
JDBC API JDBC API 是一系列的接口,它使得应用程序能够进行数据库联接,执行SQL语句,并且得到返回结果. Driver 接口 Java.sql.Driver 接口是所有 JDBC 驱动 ...
- 【翻译】Promises/A+规范
目录 介绍 译文 1. 术语(Terminology) 2. 要求(Requirements) 2.1 Promise状态 2.2 then方法 2.3 Promise解析程序 3. 注释 3.1 p ...
- 超详细的阿里字节Spring面试技术点总结（建议收藏）
前言 Spring作为现在最流行Java开发技术,其内部源码设计非常优秀. Spring这个词对于Java开发者想必不会陌生,可能你每天都在使用Spring,享受着Spring生态提供的服务.现在很多 ...
- 从开源协议到谷歌禁用华为、Docker实体清单事件
平时我们在日常开发生活都在大量和开源软件打着交道,例如安卓.Linux.Github.Docker等,而其中开源协议比如MIT.Apache也是耳熟能详,但是真正对开源协议的了解相信对大部分人来说都 ...
- java安全编码指南之:基础篇
目录 简介 java平台本身的安全性 安全第一,不要写聪明的代码 在代码设计之初就考虑安全性 避免重复的代码 限制权限 构建可信边界 封装 写文档 简介 作为一个程序员,只是写出好用的代码是不够的,我 ...
- 更好地使用google
精确搜索:双引号 精确搜索就是在你要搜索的词上,加上双引号,这时google就会完全的匹配你所要搜索的字符串 "今日黄瓜" 站内搜索:site 例如我想在stackoverflow ...
- js byte字节流和数字，字符串之间的转换，包含无符和有符之间的转换
var NumberUtil={ //byte数组转换为int整数 bytesToInt2:function(bytes, off) { var b3 = bytes[off] & 0xFF; ...
- 网站seo整站优化有什么优势
http://www.wocaoseo.com/thread-314-1-1.html 现在很多企业找网络公司做网站优化,已经不再像以前那样做目标关键词,而是通过整站优化来达到企业营销目的 ...
- CPU有个禁区，内核权限也无法进入！
神秘项目 我是CPU一号车间的阿Q,是的,我又来了. 最近一段时间,我几次下班约隔壁二号车间虎子,他都推脱没有时间,不过也没看见他在忙个啥. 前几天,我又去找他,还是没看到他人,却意外地在他桌上发现了 ...