使用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 职场文书