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 ...
随机推荐
- SpringMVC接受表单数据
@ 目录 pojo addProduct.jsp ProductController showProduct.jsp 测试结果 pojo 新建实体类Product package pojo; publ ...
- JavaScript设计模式之命令模式【命令解耦】
在讲解命令模式之前我们先来了解一个生活中的命令模式场景: 场景1: 医院看病抓药: 当你因为肾虚到医院看医生,医生一番操作之后得出结论:要吃个疗程[夏桑菊].[小柴胡](药名纯属虚构,真的肾虚就找医生 ...
- 认证授权：学习OAuth协议
1.什么是OAuth协议? OAUTH协议为用户资源的授权提供了一个安全的.开放而又简易的标准.同时,任何第三方都可以使用OAuth认证服务,任何服务提供商都可以实现自身的OAuth认证服务,因而OA ...
- python 复制与粘贴处理笔记
在python中用有一个模块可以用来处理剪切板复制的内容,pyperclip模块 pyperclip模块有copy()和paste()函数,分别用于向计算机的剪贴板发送文本,或从它接受文本. pype ...
- php 解决表单重复提交实现方法介绍
重复提交是我们开发中会常碰到的一个问题,除了我们使用js来防止表单的重复提交,同时还可以使用php来防止重复提交哦. 例1 代码如下 复制代码 <?php/* * php中如何防止表单的重复提 ...
- 牛客网数据库SQL实战解析(31-40题)
牛客网SQL刷题地址: https://www.nowcoder.com/ta/sql?page=0 牛客网数据库SQL实战解析(01-10题): https://blog.csdn.net/u010 ...
- Python趣味入门5:循环语句while
跟着小牛叔,找准正确编程入门姿势,每天只要阅读10分钟. 任何语言都有循环语句,在Python里循环更是变化无穷,有基本的循环,有循环else语句,引伸出来的还有迭代器.推导式,咱们先学习最简单的一种 ...
- 服务应用突然宕机了？别怕，Dubbo 帮你自动搞定服务隔离！
某日中午,午睡正香的时候,接到系统的报警电话,提示生产某物理机异常宕机了,目前该物理机已恢复,需要重启上面部署的应用. 这时瞬间没有了睡意,登上堡垒机,快速重启了应用,系统恢复正常.本想着继续午睡,但 ...
- Min Cost Climbing Stairs [746]
Min Cost Climbing Stairs [746] 题目描述 简单来说就是:要跳过当前楼梯需要花费当前楼梯所代表的价值cost[i], 花费cost[i]之后,可以选择跳一阶或者两阶楼梯,以 ...
- [ASP.NET Core开发实战]基础篇04 主机
主机定义 主机是封闭应用资源的对象. 设置主机 主机通常由 Program 类中的代码配置.生成和运行. HTTP项目(ASP.NET Core项目)创建泛型主机: public class Prog ...