编程 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 相关文章推荐

jquery中实现标签切换效果的代码

Mar 01 Javascript

HTML复选框和单选框 checkbox和radio事件介绍

Dec 12 Javascript

关于JS判断图片是否加载完成且获取图片宽度的方法

Apr 09 Javascript

jQuery控制DIV层实现由大到小，由远及近动画变化效果

Oct 09 Javascript

javascript弹出窗口实现代码

Nov 12 Javascript

js小数计算小数点后显示多位小数的实现方法

May 30 Javascript

node.js中EJS 模板快速入门教程

May 08 Javascript

vue+swiper实现侧滑菜单效果

Dec 28 Javascript

详解Vue 事件修饰符capture 的使用

Dec 29 Javascript

webpack4 SplitChunks实现代码分隔详解

May 23 Javascript

layui 富文本赋值，取值，取纯文本值的实例

Sep 18 Javascript

15个简单的JS编码标准让你的代码更整洁(小结)

Jul 16 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 数组的一个悲剧？

2011/05/11 PHP

PHP 小心urldecode引发的SQL注入漏洞

2011/10/27 PHP

简介PHP的Yii框架中缓存的一些高级用法

2016/03/29 PHP

php中让人头疼的浮点数运算分析

2016/10/10 PHP

利用PHP生成CSV文件简单示例

2016/12/21 PHP

PHP实现抽奖功能实例代码

2020/06/30 PHP

JavaScript中的16进制字符(改进)

2011/11/21 Javascript

通过一段代码简单说js中的this的使用

2013/07/23 Javascript

使用jquery.qrcode生成彩色二维码实例

2014/08/08 Javascript

用C/C++来实现 Node.js 的模块（一）

2014/09/24 Javascript

简介JavaScript中toUpperCase()方法的使用

2015/06/06 Javascript

JavaScript实现表格快速变色效果代码

2015/08/19 Javascript

webuploader实现上传图片到服务器功能

2018/08/16 Javascript

从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法

2018/09/18 Javascript

新年快乐! javascript实现超级炫酷的3D烟花特效

2019/01/30 Javascript

js尾调用优化的实现

2019/05/23 Javascript

Vue+ElementUI 中级联选择器Bug问题的解决

2020/07/31 Javascript

[02:19]DOTA2上海特级锦标赛观赛指南 Spectator Guide

2016/02/04 DOTA

[50:22]完美盛典-2018年度红毯走秀

2018/12/16 DOTA

python Selenium爬取内容并存储至MySQL数据库的实现代码

2017/03/16 Python

基于Python的关键字监控及告警

2017/07/06 Python

python爬虫中多线程的使用详解

2019/09/23 Python

利用Python产生加密表和解密表的实现方法

2019/10/15 Python

Python Pillow.Image 图像保存和参数选择方式

2020/01/09 Python

PyCharm无法识别PyQt5的2种解决方法，ModuleNotFoundError: No module named 'pyqt5'

2020/02/17 Python

python+Selenium自动化测试——输入,点击操作

2020/03/06 Python

Flask模板引擎Jinja2使用实例

2020/04/23 Python

python3爬虫中多线程的优势总结

2020/11/24 Python

Jupyter Notebook添加代码自动补全功能的实现

2021/01/07 Python

CSS3.0实现霓虹灯按钮动画特效的示例代码

2021/01/12 HTML / CSS

药品营销策划方案

2014/06/15 职场文书

2015年学生资助工作总结

2015/05/25 职场文书

五年级数学教学反思

2016/02/16 职场文书

goland 恢复已更改文件的操作

2021/04/28 Golang

pytorch 使用半精度模型部署的操作

2021/05/24 Python

Win11 BitLocker 驱动器加密

2022/04/19 数码科技