闲来无事，把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. 第4篇 Scrum 冲刺博客

    1.站立会议 照骗 进度 成员 昨日完成任务 今日计划任务 遇到的困难 钟智锋 重新设计项目执行流程 实现技能 庄诗楷 游戏窗口的制作 制作了开始游戏的界面,感觉还不错 无 易德康 完成所有棋子的移动 ...

  2. 个人项目wc

    github地址:https://github.com/YTFFBX/wc 1.题目描述 Word Count1. 实现一个简单而完整的软件工具(源程序特征统计程序).2. 进行单元测试.回归测试.效 ...

  3. pytest的fixture怎么用？

    文章总览图 fixture和unittest是冲突的.舍弃unittest只用pytest. 会遇到在很多用例当中,它的前置条件是长得一样的.用例写的越来越多的时候,肯定会遇到前置条件都差不多,大家差 ...

  4. Java中的 "==" 和 "equals" 区别

    分析 "==" 和 "equals" 区别的时候先了解一下Java的内存. Java内存 “==” 和  “equals” 区别” “==”: “==”比较的是 ...

  5. caoz:数据分析这点事

    http://www.wocaoseo.com/thread-53-1-1.html 先声明一下,按照传统的定义,我还真不是数据分析高手,各种关联算法,只会最简单的一种(话说不少场合还算管用):各种挖 ...

  6. python数值运算 四则运算

    数值运算 描述 获得用户输入的一个字符串,格式如下:‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬ ...

  7. Nodejs模块：path

    当前版本:v 10.16.0 一,获取文件相关信息 1,path.basename(filepath[, ext]) 获取该文件的文件名,如果有扩展名,则一起显示扩展名: 如果不想展示扩展名,只想展示 ...

  8. 阿里Java中级开发测试相关试题及答案

    ------------恢复内容开始------------ 1.JSP文件上传的HTML标签代码定义是? A. <input type="text" name=" ...

  9. USB Key

    随着互联网和电子商务的发展,USB Key作为网络用户身份识别和数据保护的“电子钥匙”,正在被越来越多的用户所认识和使用.本文对USB Key的产生和未来的发展趋势作了一个简单的介绍. 目前市场上见到 ...

  10. python3学习笔记回忆录01

    1.print(),print在python3中是一个函数,默认输出内容会自动换行,如果不换行需要加参数end=‘’ print ('hello,',end=' ’) print ('world!') ...