编程 Javascript

使用javascript实现ListBox左右全选,单选,多选,全请

Posted in Javascript onNovember 07, 2013

<html>
<head>
    <meta http-equiv="Content-Type " content="text/html;   charset=gb2312 ">
    <title>list测试</title>
</head>
<body>
    <div style="font-size: 10pt;">
        注1：左右移动进行选取
        <br />
        <br />
        注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。
        <br />
        <hr />
    </div>
    <form name="frm">
    <table>
        <tr>
            <td>
                <select name="SrcSelect" size="6" style="font-size: 11pt; width: 160px; height: 160px"
                    multiple="multiple" ondblclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect) ">
                    <option value="1">讲师</option>
                </select>
            </td>
            <td width="30px">
                <input align="left" type="button" value="> " onclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect) ">
                <br>
                <br>
                <input align="left" type="button" value=" < " onclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect) ">
            </td>
            <td>
                <select name="ObjSelect" size="6" style="font-size: 11pt; width: 160px; height: 160px"
                    multiple="multiple" ondblclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect) ">
                    <option value="2">教学管理员</option>
                    <option value="3">超级管理员</option>
                </select>
            </td>
        </tr>
    </table>
    </form>
</body>
<script type="text/javascript" language="javascript">
//上移
    function moveUp() {
        var theObjOptions = document.frm.ObjSelect.options;
        for (var i = 1; i < theObjOptions.length; i++) {
            if (theObjOptions[i].selected && !theObjOptions[i - 1].selected) {
                swapOptionProperties(theObjOptions[i], theObjOptions[i - 1]);
            }
        }
    }

//下移
    function moveDown() {
        var theObjOptions = document.frm.ObjSelect.options;
        for (var i = theObjOptions.length - 2; i > -1; i--) {
            if (theObjOptions[i].selected && !theObjOptions[i + 1].selected) {
                swapOptionProperties(theObjOptions[i], theObjOptions[i + 1]);
            }
        }
    }

    function swapOptionProperties(option1, option2) {
        var tempStr = option1.value;
        option1.value = option2.value;
        option1.value = tempStr;
        tempStr = option1.text;
        option1.text = option2.text;
        option2.text = tempStr;
        tempStr = option1.selected;
        option1.selected = option2.selected;
        option2.selected = tempStr;
    }

//列表框的位置移动
    function moveLeftOrRight(fromObj, toObj) {
        for (var i = 0; i < fromObj.length; i++) {
            var srcOption = fromObj.options[i];
            if (srcOption.selected) {
                toObj.appendChild(srcOption);
                i--;
            }
        }
    }
</script>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

在视频前插入广告

Nov 20 Javascript

JavaScript 事件系统

Jul 22 Javascript

jQuery toggleClass应用实例(附效果图)

Apr 06 Javascript

一款由jquery实现的整屏切换特效

Sep 15 Javascript

js实现数字每三位加逗号的方法

Feb 05 Javascript

简介JavaScript中的setDate()方法的使用

Jun 11 Javascript

清除js缓存的多种方法总结

Dec 09 Javascript

基于Vue.js 2.0实现百度搜索框效果

Dec 28 Javascript

解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

Aug 20 Javascript

ES6 对象的新功能与解构赋值介绍

Feb 05 Javascript

对Layer UI 模块化的用法详解

Sep 26 Javascript

微信小程序实现上传照片代码实例解析

Aug 04 Javascript

网页防止tab键的使用快速解决方法

Nov 07 #Javascript

判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解

Nov 07 #Javascript

addEventListener()第三个参数useCapture (Boolean)详细解析

Nov 07 #Javascript

zTree插件之单选下拉菜单实例代码

Nov 07 #Javascript

jQuery把表单元素变为json对象

Nov 06 #Javascript

JQuery插件开发示例代码

Nov 06 #Javascript

javascript实现yield的方法

Nov 06 #Javascript

You might like

thinkPHP中session()方法用法详解

2016/12/08 PHP

PHP7新功能总结

2019/04/14 PHP

My Desktop :) 桌面式代码

2008/12/29 Javascript

IE6,IE7,IE8下使用Javascript记录光标选中范围（已补全）

2011/08/28 Javascript

理解JavaScript的prototype属性

2012/02/11 Javascript

javaScript让文本框内的最后一个文字的后面获得焦点实现代码

2013/01/06 Javascript

JavaScript包装对象使用介绍

2013/08/29 Javascript

jQuery学习总结之jQuery事件

2014/06/30 Javascript

jQuery Mobile弹出窗、弹出层知识汇总

2016/01/05 Javascript

关于JavaScript中事件绑定的方法总结

2016/10/26 Javascript

jQuery和CSS仿京东仿淘宝列表导航菜单

2017/01/04 Javascript

微信小程序商城开发（ecshop ）简单实例

2017/04/07 Javascript

bootstrap常用组件之头部导航实现代码

2017/04/20 Javascript

VUE中v-on:click事件中获取当前dom元素的代码

2018/08/22 Javascript

新年快乐! javascript实现超级炫酷的3D烟花特效

2019/01/30 Javascript

JavaScript箭头函数中的this详解

2019/06/19 Javascript

Vue防止白屏添加首屏动画的实例

2019/10/31 Javascript

详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

2020/05/28 Javascript

node.js基础知识汇总

2020/08/25 Javascript

vue radio单选框,获取当前项(每一项)的value值操作

2020/09/10 Javascript

解决vue项目本地启动时无法携带cookie的问题

2021/02/06 Vue.js

[01:37]PWL S2开团时刻DAY1&2——这符有毒

2020/11/20 DOTA

python实现下载指定网址所有图片的方法

2015/08/08 Python

Python操作mongodb数据库的方法详解

2018/12/08 Python

pyqt 实现在Widgets中显示图片和文字的方法

2019/06/13 Python

Django中的session用法详解

2020/03/09 Python

Python代码执行时间测量模块timeit用法解析

2020/07/01 Python

Python调用C/C++的方法解析

2020/08/05 Python

Pytest单元测试框架如何实现参数化

2020/09/05 Python

流行文化收藏品：Sideshow（DC漫画，星球大战，漫威）

2019/03/17 全球购物

学雷锋志愿服务月活动总结

2014/03/09 职场文书

市场营销方案范文

2014/03/11 职场文书

幼儿园小班评语大全

2014/04/17 职场文书

单位法定代表人授权委托书

2014/09/20 职场文书

2014年绿化工作总结

2014/12/09 职场文书

2014年个人工作总结模板

2014/12/15 职场文书