当前位置: 代码迷 >> Java Web开发 >> jsp页面,多选框解决方法
  详细解决方案

jsp页面,多选框解决方法

热度:9167   发布时间:2013-02-25 21:12:13.0
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">日本-->            </select>        </td></tr>    </table></form></body></html>
  相关解决方案