闲来无事，把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="&lt;--"/>
<input name="remove_all" id="remove_all" type="button" class="button" value="&lt;=="/>
</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操作多选下拉列表的更多相关文章

  1. javascript 操作复选框无效

    <script type="text/javascript"> // 操作checkbox复选框按钮 var inputs = $('#article_list').f ...

  2. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  3. JavaScript：复选框事件的处理

    复选框事件的处理 复选框本身也是多个组件的名字相同.所以在定义复选框的同事依然要使用document.all()取得全部的内容. 范例:操作复选框,要求是可以一个个去选择选项,也可以直接全选,全选按钮 ...

  4. 一款不错的多选下拉列表利器—— Ext.ux.form.SuperBoxSelect

    在B/S系统中,下拉列表(select/dropdownlist/combobox)的应用随处可见,为了增强用户体验,开发人员也常常会做一些带联想功能的下拉列表, 特别是数据项比较多的时候,用户筛选起 ...

  5. Flex4 双选下拉列表的实现（源代码）

    本文属原创文章,如需转载,请注明出处,谢谢 企业应用中少不了双选下拉列表控件,但几乎都没有独立的控件,Flex在这上面得天独厚,ArrayCollection的过滤功能使得我们只需要一个数据源就可以将 ...

  6. Python javascript操作DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  7. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  8. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  9. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

随机推荐

  1. Spring MVC中处理中文问题

    之前练习过提交表单数据,但是提交的数据包含中文,这一篇练习如何处理中文.在Spring MVC中处理中文问题和Filter处理中文问题是一样的手段 @ 目录 Filter addProduct.jsp ...

  2. 第2章 RDD编程（2.3）

    第2章 RDD编程(2.3) 2.3 TransFormation 基本RDD Pair类型RDD (伪集合操作  交.并.补.笛卡尔积都支持) 2.3.1 map(func) 返回一个新的RDD,该 ...

  3. 更换git远程仓库地址

    通过命令直接修改远程仓库地址 git remote 查看所有远程仓库 git remote xxx 查看指定远程仓库地址 git remote set-url origin 你新的远程仓库地址 先删除 ...

  4. Promise对象入门

    简介 promise对象可以获取异步操作的消息,提供统一的API,各个异步操作都可以用同样的方法进行处理. promise对象不受外界影响,其有三种状态:pending(进行中).fulfilled( ...

  5. MyEclipse2017 安装MAVEN插件办法

    笔者辛苦所写,如要留用,请标明出处,谢谢 —————————————————————————————————————————————————————— 笔者由于用到的项目使用到MAVEN,为了以后搭建 ...

  6. Python数据清洗：提取爬虫文本中的电话号码

    步骤索引 效果展示 注意事项 代码 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识. ...

  7. android 数据绑定(5) kotlin 的binding bug

    1.BR找不到,无法自动更新 1.1 描述 https://stackoverflow.com/questions/57983508/android-studio-kotlin-databinding ...

  8. 微信小程序|小游戏

    [官]小游戏开发 https://developers.weixin.qq.com/minigame/dev/index.html 官网 https://mp.weixin.qq.com 做了4个微信 ...

  9. Mac OSX上安装Nginx

    1. 通过brew instal nginx安装 ==> Downloading https://homebrew.bintray.com/bottles/nginx-1.10.1.el_cap ...

  10. 【jmespath】—2. 进阶 List and Slice Projections

    Projections翻译的话说实话我也不知道翻成什么比较准确,姑且就叫"投影"吧,不过带来的功能确实非常的强大.好用. 首先,我先说下我的理解: 通配符 * 通配符生成的是一个l ...