jsp页面，多选框

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

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

有一个单选框和一个多选框，多选框的名字是业务平台，单选按钮分别是‘三期’，‘四期’，‘三期+四期’，选择三期则下面多选框的待选业务中出现了短信平台，彩信平台；选择四期则出现了wap平台和web平台，选择三期+四期则出现了短信平台、彩信平台、wap平台和web平台，在业务平台这个多选框中，分为待选业务和已选业务，有4个按钮，第一个按钮可以把所有的待选业务选择到已选业务中，第二个按钮可以讲所有的已选业务取消，点左侧的短信平台，然后点第三个按钮，则可以将短信平台添加到已选业务中去，选择已选业务中的短信平台，点第四个按钮则可以取消短信平台，如果那位大侠比较擅长jsp和js，知道怎么写代码的，可以加我qq1913228080，感谢各位的帮忙了
<form>
<table>
<tr>
我想去的地方：
<input type = radio name = "name1">欧洲
<input type = radio name = "name1">美洲
<input type = radio name = "name1">亚洲
</tr>
<tr>
国家
<select>
<option value ="英国">英国
<option value ="法国">法国
<option value ="西班牙">西班牙
<option value ="美国">美国
<option value ="加拿大">加拿大
<option value ="中国">中国
<option value ="泰国">泰国
<option value ="日本">日本
</select>
</tr>
</table>
  </form>
现在有这样一个单选和多选框，我的需求是选择上面的欧洲时，下面的国家的多选框中只显示英国，法国，西班牙；选择美洲是显示美国和加拿大；选择亚洲时显示中国，泰国和日本，使用js完成这个效果
首先更正一下,不是多选框,是下拉框
jquery很好实现的
几个radio加上onclick事件
每个radion对应一个事件,给select起个id或name
通过id添加对应的option
我知道啊，主要是那个function我不知道怎么写啊，你说的“通过id添加对应的option”能说的清楚点，具体点吗？我对jquery不熟悉啊，能给写一个function吗？
                 向高手求教JS  有时间可以聊聊本人QQ469400591 ，请加的时候注明来意。谢谢合作。
有一个单选框和一个多选框，多选框的名字是业务平台，单选按钮分别是‘三期’，‘四期’，‘三期+四期’，选择三期则下面多选框的待选业务中出现了短信平台，彩信平台；选择四期则出现了wap平台和web平台，选择三期+四期则出现了短信平台、彩信平台、wap平台和web平台，在业务平台这个多选框中，分为待选业务和已选业务，有4个按钮，第一个按钮可以把所有的待选业务选择到已选业务中，第二个按钮可以讲所有的已选业务取消，点左侧的短信平台，然后点第三个按钮，则可以将短信平台添加到已选业务中去，选择已选业务中的短信平台，点第四个按钮则可以取消短信平台，如果那位大侠比较擅长jsp和js，知道怎么写代码的
<!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">
                
            </select>
        </td></tr>
    </table>
</form>
</body>
</html>仅供参考^_^
http://blog.csdn.net/southcamel/article/details/7798744
参考下这个