jsp页面，多选框解决方法-Java教程-爱易网页

jsp页面，多选框解决方法

日期：2014-05-17　浏览次数：20823 次

jsp页面，多选框
实现如下效果：
在form表单中，
有一个单选框和一个多选框
大致如下：
单选框1 单选框2 单选框3
业务平台待选业务已选平台
12 >>>
13 >>
14 <<
15 <<<
点击单选框2，下面的待选业务平台显示业务12,13 ，点击单选框2待选业务平台显示业务14,15，
点击单选框1，下面的待选业务平台显示单选框2和单选框3的所以业务
点击3个向右的箭头能将左侧所有的业务都加入到右侧的已选平台中，点击2个向右的箭头，能任意选择多个业务，
点击向左的2个箭头能将已选平台的任意几个业务取消，点击向左的3个箭头能将已选平台的所有业务都取消

------解决方案--------------------

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
    
    var selector;
    var option;
    var text;
    
    function createOption(value, text){
        option = document.createElement("option");
        option.setAttribute("value", value);
        selector.appendChild(option);
        text = document.createTextNode(text);
        option.appendChild(text);
    }

    function selectItems(radio){
        var type = radio.value;
        selector = document.getElementById("select");
        if("u"==type){
            var k = selector.options.length;
            for(var i=k; i>=0; i--){
                selector.options.remove(i);
            }
            createOption("EN","英国");
            createOption("FN","法国");
            createOption("Spain","西班牙");
        }
        else if("am"==type){
            var k = selector.options.length;
            for(var i=k; i>=0; i--){
                selector.options.remove(i);
            }
            createOption("AM","美国");
            createOption("CAN","加拿大");
        }
        else if("as"==type){
            var k = selector.options.length;
            for(var i=k; i>=0; i--){
                selector.options.remove(i);
            }
            createOption("CHN","中国");
            createOption("Thailand","泰国");
            createOption("Japan","日本");
        }
    }
</script>
</head>

<body>
<form action="" method="post">
    <table>
        <tr> 
        <td>我想去的地方：
            <input type="radio" name="radio" value="u" onclick="selectItems(this);" />
            欧洲
            <input type="radio" name="radio" value="am" onclick="selectItems(this);" />
            美洲
            <input type="radio" name="radio" value="as" onclick="selectItems(this);" />
            亚洲 
            </td></tr>
        <tr> <td>国家
            <select size="1" id="select">
                <!--option value ="英国" id="c1">英国
                <option value ="法国" id="c2">法国
                <option value ="西班牙" id="c3">西班牙
                <option value ="美国" id="c4">美国
                <option value ="加拿大" id="c5">加拿大
                <option value ="中国" id="c6">中国
                <option value ="泰国" id="c7">泰国
                <option value ="日本" id="c8">日本-->

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

jsp页面，多选框解决方法

相关资料更多>

推荐阅读更多>