编程 Javascript

使用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 相关文章推荐

document.all的一个比较完整的总结及案例

Jan 31 Javascript

打开新窗口关闭当前页面不弹出关闭提示js代码

Mar 18 Javascript

使用jQuery validate 验证注册表单实例演示

Mar 25 Javascript

详解AngularJS中$http缓存以及处理多个$http请求的方法

Feb 06 Javascript

react.js CMS 删除功能的实现方法

Apr 17 Javascript

JavaScript中undefined和null的区别

May 03 Javascript

Bootstrap table使用方法记录

Aug 23 Javascript

vue2.0使用swiper组件实现轮播效果

Nov 27 Javascript

jQuery实现标签子元素的添加和赋值方法

Feb 24 jQuery

微信小程序自定义组件之可清除的input组件

Jul 17 Javascript

在vue-cli 3中给stylus、sass样式传入共享的全局变量

Aug 12 Javascript

p5.js临摹旋转爱心

Oct 23 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

Thinkphp中的volist标签用法简介

2014/06/18 PHP

YII框架模块化处理操作示例

2019/04/26 PHP

详解laravel passport OAuth2.0的4种模式

2019/11/04 PHP

非常好的js代码

2006/06/27 Javascript

jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)

2010/05/22 Javascript

一段批量给页面上的控件赋值js

2010/06/19 Javascript

jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

2013/01/11 Javascript

动态加载script文件的两种方法

2013/08/15 Javascript

jquery中EasyUI使用技巧小结

2015/02/10 Javascript

JavaScript实现DIV层拖动及动态增加新层的方法

2015/05/12 Javascript

jQuery EasyUI Dialog拖不下来如何解决

2015/09/28 Javascript

谈谈我对JavaScript原型和闭包系列理解(随手笔记6)

2015/12/20 Javascript

开源免费天气预报接口API及全国所有地区代码(国家气象局提供）

2016/12/26 Javascript

原生js实现商品放大镜效果

2017/01/12 Javascript

详解Vue整合axios的实例代码

2017/06/21 Javascript

vue+socket.io+express+mongodb 实现简易多房间在线群聊示例

2017/10/21 Javascript

iview tabs 顶部导航栏和模块切换栏的示例代码

2019/03/04 Javascript

使用layer模态框给新页面传值的方法

2019/09/27 Javascript

pyqt5的QWebEngineView 使用模板的方法

2018/08/18 Python

Python实现随机创建电话号码的方法示例

2018/12/07 Python

python pandas利用fillna方法实现部分自动填充功能

2020/03/16 Python

Python中Selenium库使用教程详解

2020/07/23 Python

CSS3实现王者匹配时的粒子动画效果

2019/04/12 HTML / CSS

HTML5中如何显示视频呢 HTML5视频播放demo

2013/06/08 HTML / CSS

全球采购的街头服饰和帽子：Urban Excess

2020/10/28 全球购物

后勤工作职责

2013/12/22 职场文书

2014年师德师风学习材料

2014/05/16 职场文书

媒矿安全生产承诺书

2014/05/23 职场文书

2014年行政助理工作总结

2014/11/19 职场文书

2014收银员工作总结范文

2014/12/16 职场文书

给女朋友道歉的话大全

2015/01/20 职场文书

2015年评职称个人工作总结

2015/10/15 职场文书

Python字符串对齐方法使用(ljust()、rjust()和center())

2021/04/26 Python

5行Python代码实现一键批量扣图

2021/06/29 Python

php将xml转化对象的实例详解

2021/11/17 PHP

Spring Boot 实现 WebSocket

2022/04/30 Java/Android