从一个多选框将选项移动到另一多选框中的js小代码

原创 于 2007-06-15 17:27:00 发布 · 1.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#function #button #null #input #object #encoding

本文介绍了一种通过JavaScript实现的从一个多选框向另一个多选框转移已选选项的方法。该方法包括选择项的移动、添加、删除等功能，并提供了一个简单的用户界面用于演示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
    <head>
        <title> Test </title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <meta name="title" content="" />
        <meta name="author" content="" />
        <meta name="subject" content="" />
        <meta name="language" content="en" />
        <meta name="keywords" content="" />
        <style type="text/css">
            #debugDiv { border: 1px solid red; background-color: gray; }
        </style>
    </head>

    <body>


<script type="text/javascript">
    // 获取对象
    function getElementByIdString ( IdString ) {
        var control;
        switch ( typeof ( IdString ) ) {
            case "string" : 
                control = document.getElementById ( IdString );
                break;
            case "object" :
                control = IdString;
                break;
        }
        if ( typeof(control) == "object" && control != null ) {
            if ( control.tagName.toLowerCase() == "select" ) {
                return control;
            } else {
                return null;
            }
        } else {
            return null;
        }
    }



    // 将选项从一个选择框移动到另一个选择框中
    function moveSeleteItems ( srcCtr, descCtr ) {
        var srcCtr = getElementByIdString ( srcCtr );
        var descCtr = getElementByIdString ( descCtr );
        if ( srcCtr === null || descCtr === null ) {
            return false;
        }
        if ( srcCtr.selectedIndex < 0 ) { return false; }
        debug ( srcCtr.name + " --> " + descCtr.name + "<br /> " );
        // 取数据源长度
        len = srcCtr.options.length;
        // 添加到目标框
        for ( i = 0; i < len; i++ ) {
            if ( srcCtr.options[i].selected  ) {
                debug ( srcCtr.options[i].index + "<br /> " );
                appendOption ( descCtr, srcCtr.options[i].innerText, srcCtr.options[i].value );
            }
        }
        // 从源框中移除
        for ( i = len-1; i > 0; i-- ) {
            if ( srcCtr.options[i].selected ) {
                deleteOption ( srcCtr, i );
            }
        }
    }

    // 添加一个选项
    function appendOption ( descCtr, descText, descValue ) {
        //alert( "appendOption : " + getElementByIdString ( descCtr ) );
        descCtr = getElementByIdString ( descCtr );
        var oOption = document.createElement("option");
        oOption.innerText = descText;
        oOption.value = descValue;
        descCtr.appendChild ( oOption );
    }
    // 删除一个选项
    function deleteOption ( descCtr, srcIndex ) {
        descCtr.options[srcIndex].selected = false;
        descCtr.removeChild ( descCtr.options[srcIndex] );
    }
    // 当选项选择时触发
    function changeSelectItem ( srcCtr ) {
        var srcCtr = document.getElementById(srcCtr);
        if ( srcCtr.options.value == -1 ) {
            clearSelectItems ( srcCtr );
            return true;
        }

//        // 测试使用
//        for ( i = 0; i < srcCtr.options.length; i++ ) {
//            if ( srcCtr.options[i].selected ) {
//                //alert( srcCtr.options[i].value );
//            }
//        }
    }
    // 清除所有已经选择的选项
    function clearSelectItems ( srcCtr ) {
        for ( i = 0; i < srcCtr.options.length; i++ ) {
            srcCtr.options[i].selected = false;
        }
    }
    // 调试信息方法
    function debug ( info ) {
        var descCtr = getElementByIdString ( "descCtr" );
    }
</script>

        <select id="src" name="src" multiple="multiple" onchange="changeSelectItem(this)">
            <option value="-1">clear</option>
            <option value="1">a</option>
            <option value="2" selected="selected">b</option>
            <option value="3">c</option>
            <option value="4">d</option>
            <option value="5" selected="selected">e</option>
            <option value="6">f</option>
        </select>

        <input type="button" value="add to desc" onclick="moveSeleteItems('src', 'desc')" />
        <input type="button" value="del from src" onclick="moveSeleteItems ('desc', 'src')" />

        <input type="button" value="debug" onclick="debug ( 'information' )" />

        <select id="desc" name="desc" multiple="multiple"onchange="changeSelectItem('desc')">
            <option value="-1">clear</option>
        </select>



    </body>

</html>

 

今天自己动手写了一个从一个多选框将选项移动到另一多选框中的小代码...

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值