编程 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 css在IE和Firefox中区别分析

Feb 18 Javascript

javascript贪吃蛇完整版(源码)

Dec 09 Javascript

js简单的表格添加行和删除行操作示例

Mar 31 Javascript

jQuery中removeProp()方法用法实例

Jan 05 Javascript

JavaScript实现页面定时刷新（定时器，meta）

Oct 12 Javascript

Js动态设置rem来实现移动端字体的自适应代码

Oct 14 Javascript

如何用js判断dom是否有存在某class的值

Feb 13 Javascript

canvas实现爱心和彩虹雨效果

Mar 09 Javascript

JavaScript前端页面搜索功能案例【基于jQuery】

Jul 10 jQuery

vue与django集成打包的实现方法

Nov 11 Javascript

JavaScript Blob对象原理及用法详解

Oct 14 Javascript

Vue中使用JsonView来展示Json树的实例代码

Nov 16 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函数)

2006/10/09 PHP

PHP开发入门教程之面向对象

2006/12/05 PHP

新手学PHP之数据库操作详解及乱码解决！

2007/01/02 PHP

PHP 杂谈《重构-改善既有代码的设计》之一重新组织你的函数

2012/04/09 PHP

使用php实现下载生成某链接快捷方式的解决方法

2013/05/07 PHP

php输出xml必须header的解决方法

2014/10/17 PHP

用PHP的socket实现客户端到服务端的通信实例详解

2017/02/04 PHP

让ThinkPHP的模板引擎达到最佳效率的方法详解

2017/03/14 PHP

PHP中__set()实例用法和基础讲解

2019/07/23 PHP

jQuery 判断页面元素是否存在的代码

2009/08/14 Javascript

jquery 卷帘效果实现代码(不同方向)

2013/02/05 Javascript

中文字符串截取的js函数代码

2013/04/17 Javascript

js在数组中删除重复的元素自保留一个(两种实现思路)

2014/08/22 Javascript

对象转换为原始值的实现方法

2016/06/06 Javascript

JavaScript基于自定义函数判断变量类型的实现方法

2016/11/23 Javascript

微信小程序详解页面跳转与返回并回传数据

2017/02/13 Javascript

详解使用angular的HttpClient搭配rxjs

2017/09/01 Javascript

使用javaScript实现鼠标拖拽事件

2020/04/03 Javascript

vue树形结构获取键值的方法示例

2018/06/21 Javascript

elementUI table表格动态合并的示例代码

2019/05/15 Javascript

vue实现表单未编辑或未保存离开弹窗提示功能

2020/04/08 Javascript

python基于BeautifulSoup实现抓取网页指定内容的方法

2015/07/09 Python

对python numpy.array插入一行或一列的方法详解

2019/01/29 Python

详解python配置虚拟环境

2019/04/08 Python

Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式

2020/03/11 Python

Jupyter Notebook 实现正常显示中文和负号

2020/04/24 Python

关于Python解包知识点总结

2020/05/05 Python

潘多拉意大利官方网上商城：网上选购PANDORA珠宝

2018/10/07 全球购物

理肤泉英国官网：La Roche-Posay英国

2019/01/14 全球购物

财务经理的岗位职责

2013/12/17 职场文书

乡镇三项教育实施方案

2014/03/30 职场文书

三年级学生评语

2014/04/23 职场文书

2015年卫生监督工作总结

2015/05/21 职场文书

幼儿园六一儿童节主持词

2015/06/30 职场文书

通知怎么写？

2019/04/17 职场文书

JVM的类加载器和双亲委派模式你了解吗

2022/03/13 Java/Android