使用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算符的优先级介绍
Mar 20 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
JS实现网页时钟特效
Mar 25 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 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代码
2007/03/08 PHP
php 小乘法表实现代码
2009/07/16 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
onpropertypchange
2006/07/01 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
微信小程序使用蓝牙小插件
2019/09/23 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
香港零食网购:上仓胃子
2020/06/08 全球购物
AJax面试题
2014/11/25 面试题
简历中个人求职的自我评价模板
2013/11/29 职场文书
个人自我鉴定总结
2014/03/25 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
武当山导游词
2015/02/03 职场文书