使用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 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
基于javascript的无缝滚动动画1
Aug 07 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 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 和 MySQL 基础教程(二)
2006/10/09 PHP
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
js查错流程归纳
2012/05/04 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
python 从远程服务器下载东西的代码
2013/02/10 Python
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python之re操作方法(详解)
2017/06/14 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
Django 再谈一谈json序列化
2020/03/16 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
C#公司笔试题
2014/03/28 面试题
简单的JAVA编程面试题
2013/03/19 面试题
法律专业个人实习自我鉴定
2013/09/23 职场文书
导游词之日月潭
2019/11/05 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
Python实现归一化算法详情
2022/03/18 Python