编程 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 相关文章推荐

JavaScript constructor和instanceof,JSOO中的一对欢喜冤家

May 25 Javascript

JQery 渐变图片导航效果代码漂亮

Jan 01 Javascript

MC Dialog js弹出层完美兼容多浏览器(5.6更新)

May 06 Javascript

jquery和css3实现的炫酷时尚的菜单导航

Sep 01 Javascript

JS实现同时搜索百度和必应的方法

Jan 27 Javascript

jQuery实现的数值范围range2dslider选取插件特效多款代码分享

Aug 27 Javascript

JavaScript 封装一个tab效果源码分享

Sep 15 Javascript

JavaScript 控制字体大小设置的方法

Nov 23 Javascript

javascript中setAttribute兼容性用法分析

Dec 12 Javascript

Bootstrap的modal拖动效果

Dec 25 Javascript

利用Jquery实现几款漂亮实用的时间轴(附示例代码)

Feb 15 Javascript

微信小程序实现签到功能

Oct 31 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

怎样在php中使用PDF文档功能

2006/10/09 PHP

PHP 远程关机实现代码

2009/11/10 PHP

php下利用curl判断远程文件是否存在的实现代码

2011/10/08 PHP

php递归函数三种实现方法及如何实现数字累加

2015/08/07 PHP

通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法

2020/04/02 PHP

JavaScript常用的弹出广告及背投广告实现方法

2015/02/06 Javascript

JavaScript数组的定义及数字操作技巧

2016/06/06 Javascript

javascript宿主对象之window.navigator详解

2016/09/07 Javascript

Javascript中常用类型的格式化方法小结

2016/12/26 Javascript

javascript实现滑动解锁功能

2017/03/22 Javascript

微信小程序实战之自定义模态弹窗（8）

2017/04/18 Javascript

JavaScript递归算法生成树形菜单

2017/08/15 Javascript

浅谈小程序globalData的那些事儿

2019/11/01 Javascript

基于vue.js仿淘宝收货地址并设置默认地址的案例分析

2020/08/20 Javascript

Python中使用动态变量名的方法

2014/05/06 Python

python使用BeautifulSoup分析网页信息的方法

2015/04/04 Python

python中常用检测字符串相关函数汇总

2015/04/15 Python

Python3.x中自定义比较函数

2015/04/24 Python

浅谈Series和DataFrame中的sort_index方法

2018/06/07 Python

Python使用numpy模块创建数组操作示例

2018/06/20 Python

Python实现的从右到左字符串替换方法示例

2018/07/06 Python

Python运行异常管理解决方案

2020/03/09 Python

使用openCV去除文字中乱入的线条实例

2020/06/02 Python

html5 worker 实例(二) 图片变换效果

2013/06/24 HTML / CSS

印尼披萨外送专家：Domino’s Pizza印尼

2017/12/28 全球购物

房产买卖委托公证书

2014/04/04 职场文书

超市开店计划书

2014/09/15 职场文书

银行党的群众路线教育实践活动对照检查材料

2014/09/25 职场文书

党的群众路线批评与自我批评范文

2014/10/16 职场文书

铣工实训报告

2014/11/05 职场文书

2015年爱牙日活动总结

2015/03/23 职场文书

事业单位财务人员岗位职责

2015/04/14 职场文书

捐书仪式主持词

2015/07/04 职场文书

2015年办税服务厅工作总结

2015/07/23 职场文书

2016国庆节67周年红领巾广播稿

2015/12/18 职场文书

建筑工程挂靠协议书

2016/03/23 职场文书