使用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 相关文章推荐
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
js全选按钮的实现方法
Nov 17 Javascript
Javascript闭包实例详解
Nov 29 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
javascript如何定义对象数组
Jun 07 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 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错误信息方法的详解
2013/06/09 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
Python的print用法示例
2014/02/11 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
市场营销专科应届生求职信
2013/11/24 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
园艺师求职信
2014/04/27 职场文书
建设投标担保书
2014/05/13 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
受资助学生感谢信
2015/01/21 职场文书
应急管理工作总结2015
2015/05/04 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python