实现如下效果:
在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>