使用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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
Node.js安装配置图文教程
May 10 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 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获取用户浏览器版本的方法
2015/01/03 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
Python中random模块用法实例分析
2015/05/19 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
python中强大的format函数实例详解
2018/12/05 Python
Python笔记之工厂模式
2019/11/20 Python
python中count函数简单的实例讲解
2020/02/06 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
教师自荐信
2013/12/10 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
个人综合鉴定材料
2014/05/23 职场文书
小学班级口号
2014/06/09 职场文书
信访维稳工作汇报
2014/10/27 职场文书