我要在一个JSP页中实现三级联动radio,radio中的数据是由一个java接口函数从数据库中取出然后提供的,返回数据保存在一个LIST中,数据形式是这样的:
Math,Algebra 1,Algebra
Math,Algebra 2,Algebra
Math,Calculus,Calculus
Math,Eighth Grade,Reasoning
Math,Fifth Grade,Algebra
Science,Fifth Grade,Physical Sciences 
Science,First Grade,Biology
共有10个固定的学科(第一组RADIO)和不固定的级别(第二组RADIO)和不固定的学科子项(第三组RADIO),请问如何把这样的数据放到数组中,并根据固定的学科(第一组RADIO)的选择,动态的添加第二组RADIO和第三组RADIO的内容?谢谢,我弄了一上午了,头都大了,还是没进展,请大侠帮忙!

解决方案 »

  1.   

    前台直接用JAVASCRIPT写就是了呀,选择第一个RADIO的时候触发一个JAVASCRIPT方法,然后在方法里边写第二个RADIO的内容,同样,选择选择第二个RADIO的时候触发一个JAVASCRIPT方法,然后在方法里边写第三个RADIO的内容
      

  2.   

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    <!--
    td {  font-size: 9pt}
    -->
    </style>
    <SCRIPT  LANGUAGE="javascript">
    <!--
    var Flag=true;var MessageVar = "                    正在调入网页,请稍等......                    ";
    var showStart=0;
    var showEnd =48;
    var Mytimer=null;function ShowMsg() 
    {       
    clearTimeout(Mytimer);
    var showString;
    if (showStart<showEnd)
    showString=MessageVar.substring(showStart,showEnd+2);
    else showString=MessageVar.substring(showStart,MessageVar.length)+
    MessageVar.substring(0,showEnd+2);showStart=(showStart+2)%MessageVar.length;
    showEnd=(showEnd+2)%MessageVar.length;
    window.status = showString;
    Mytimer=setTimeout("ShowMsg()",1000);
    }ShowMsg();var arr_d_zylb = new Array();
    var arr_x_zylb = new Array();
    var arr_z_zylb = new Array();arr_d_zylb[0] = "政党资料";
    arr_d_zylb[1] = "国家资料";
    arr_d_zylb[2] = "地区资料";    arr_x_zylb[0] = new Array();
        
        arr_x_zylb[0][0] = "世界总况";
        arr_x_zylb[0][1] = "世界总况1";
        arr_x_zylb[0][2] = "世界总况2";
        arr_x_zylb[0][3] = "世界总况3";
        
        
        arr_x_zylb[1] = new Array();
        arr_x_zylb[1][0] = "亚洲总况";
        arr_x_zylb[1][1] = "中国";
        arr_x_zylb[1][2] = "阿富汗";    arr_x_zylb[2] = new Array();
        arr_x_zylb[2][0] = "非洲总况";
        arr_x_zylb[2][1] = "阿尔及利亚";
        arr_x_zylb[2][2] = "埃及";
        
                         arr_z_zylb[0] = new Array();
                             arr_z_zylb[0][0] = new Array();
                                 arr_z_zylb[0][0][0] = "世界专题0";
                                 arr_z_zylb[0][0][1] = "世界专题1";
                                 arr_z_zylb[0][0][2] = "世界专题2";
                                 arr_z_zylb[0][0][3] = "世界专题3";
                             
                             arr_z_zylb[0][1] = new Array();
                                 arr_z_zylb[0][1][0] = "世界专题10";
                                 arr_z_zylb[0][1][1] = "世界专题11";
                                 arr_z_zylb[0][1][2] = "世界专题12";
                                 arr_z_zylb[0][1][3] = "世界专题13";                         arr_z_zylb[0][2] = new Array();
                                 arr_z_zylb[0][2][0] = "世界专题20";
                                 arr_z_zylb[0][2][1] = "世界专题21";
                                 arr_z_zylb[0][2][2] = "世界专题22";
                                 arr_z_zylb[0][2][3] = "世界专题23";                         arr_z_zylb[0][3] = new Array();
                                 arr_z_zylb[0][3][0] = "世界专题30";
                                 arr_z_zylb[0][3][1] = "世界专题31";
                                 arr_z_zylb[0][3][2] = "世界专题32";
                                 arr_z_zylb[0][3][3] = "世界专题33";
                         
                 arr_z_zylb[1] = new Array();
                     arr_z_zylb[1][0] = new Array();
                         arr_z_zylb[1][0][0] = "亚洲专题01";
                         arr_z_zylb[1][0][1] = "亚洲专题02";
                         arr_z_zylb[1][0][2] = "亚洲专题03";                               arr_z_zylb[1][1] = new Array();
                         arr_z_zylb[1][1][0] = "亚洲专题11";
                         arr_z_zylb[1][1][1] = "亚洲专题12";
                         arr_z_zylb[1][1][2] = "亚洲专题13";                               arr_z_zylb[1][2] = new Array();
                         arr_z_zylb[1][2][0] = "亚洲专题21";
                         arr_z_zylb[1][2][1] = "亚洲专题22";
                         arr_z_zylb[1][2][2] = "亚洲专题23";                           arr_z_zylb[2] = new Array();
                     arr_z_zylb[2][0] = new Array();
                         arr_z_zylb[2][0][0] = "非洲专题01";
                         arr_z_zylb[2][0][1] = "非洲专题02";
                         arr_z_zylb[2][0][2] = "非洲专题03";                 arr_z_zylb[2][1] = new Array();
                         arr_z_zylb[2][1][0] = "非洲专题11";
                         arr_z_zylb[2][1][1] = "非洲专题12";
                         arr_z_zylb[2][1][2] = "非洲专题13";                 arr_z_zylb[2][2] = new Array();
                         arr_z_zylb[2][2][0] = "非洲专题21";
                         arr_z_zylb[2][2][1] = "非洲专题22";
                         arr_z_zylb[2][2][2] = "非洲专题23";function DoLoad(form){
    for(n = 0; n < arr_d_zylb.length; n++){
    NewOptionName = new Option(arr_d_zylb[n], arr_d_zylb[n]);
    form.d_edu_cat.options[n] = NewOptionName;
    }
    form.d_edu_cat.options[0].selected = true;//一类
    for(n = 0; n < arr_x_zylb[0].length; n++){
    NewOptionName = new Option(arr_x_zylb[0][n], arr_x_zylb[0][n]);
    form.x_edu_cat.options[n] = NewOptionName;
    }
    form.x_edu_cat.options[0].selected = true;//二类for(n = 0; n < arr_z_zylb[0][0].length; n++){
    NewOptionName = new Option(arr_z_zylb[0][0][n], arr_z_zylb[0][0][n]);
    form.z_edu_cat.options[n] = NewOptionName;
    }
    form.z_edu_cat.options[0].selected = true;//三类clearTimeout(Mytimer);
    window.status = "";
    }  //初始化下拉框function Do_Edu_Change(form, num){
    var n, i, m,k;
    m = document.SearchForm.d_edu_cat.selectedIndex;
    n = document.SearchForm.x_edu_cat.length;
    for(i = n - 1; i >= 0; i--)
    document.SearchForm.x_edu_cat.options[i] = null;for(i = 0; i < arr_x_zylb[m].length; i++){
    NewOptionName = new Option(arr_x_zylb[m][i], arr_x_zylb[m][i]);
    document.SearchForm.x_edu_cat.options[i] = NewOptionName;
    }
    document.SearchForm.x_edu_cat.options[0].selected = true;
    //document.SearchForm.searchword.value = document.SearchForm.elements[num + 1].options[0].value ;k = document.SearchForm.x_edu_cat.selectedIndex;
    n = document.SearchForm.z_edu_cat.length;
    for(i = n - 1; i >= 0; i--)
     document.SearchForm.z_edu_cat.options[i] = null;for(i = 0; i < arr_z_zylb[m][k].length; i++){
    NewOptionName = new Option(arr_z_zylb[m][k][i], arr_z_zylb[m][k][i]);
    document.SearchForm.z_edu_cat.options[i] = NewOptionName;
    }
    document.SearchForm.z_edu_cat.options[0].selected = true;
    }function Do_rj_Change(form, num){
    var n, i, m,k;
    k = document.SearchForm.d_edu_cat.selectedIndex;
    m = document.SearchForm.x_edu_cat.selectedIndex;
    n = document.SearchForm.z_edu_cat.length;
    for(i = n - 1; i >= 0; i--)
    document.SearchForm.z_edu_cat.options[i] = null;for(i = 0; i < arr_x_zylb[k][m].length; i++){
    NewOptionName = new Option(arr_z_zylb[k][m][i], arr_z_zylb[k][m][i]);
    document.SearchForm.z_edu_cat.options[i] = NewOptionName;
    }
    document.SearchForm.z_edu_cat.options[0].selected = true;
    }
    function Do_zt_Change(form, num){
    var n;
    n = document.SearchForm.elements[num+1].selectedIndex;
    document.SearchForm.searchword.value = document.SearchForm.elements[num + 1].options[n].value ;
    }
    //-->
    </SCRIPT>
    </head>
      

  3.   

    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" onload="DoLoad(SearchForm);">
    <table width="98%" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr> 
        <td bgcolor="#000000"> 
          <p><img src="images/titleziliao.gif"></p>
        </td>
        <td align="center" bgcolor="#000000"><a href=index.htm><font color="#FFFFFF" style=font-size:9pt>返回主页</font></a><font color="#FFFFFF">  <img src="images/earth.gif" border="0"></font></td>
      </tr>
    </table>
    <table width="98%" border="0" cellspacing="0" cellpadding="4" height="88%" align="center">
      <tr> 
        <td width="122" bgcolor="#FF6699" valign="top" align="center"> 
          <p><br/>
          </p>
    <form>      
          <table width="116" border="1" cellspacing="0" bordercolor="#FFFFFF">
            <tr align="center"> 
              <td><font color="#FFFFFF"><b>检 索</b></font></td>
            </tr>
            <tr align="center"> 
              <td><font color="#FFFFFF">用户</font><input type="text" name="textfield2" size="7">
                <br/>            
                <font color="#FFFFFF">密码</font><input type="text" name="textfield22" size="7">
              </td>
            </tr>
          </table>
    </form>      
          <br/>
          <br/>
    <form>      
          <table width="116" border="1" cellspacing="0" bordercolor="#FFFFFF">
            <tr align="center"> 
              <td><font color="#FFFFFF"><b>录 入</b></font></td>
            </tr>
            <tr align="center"> 
              <td> <font color="#FFFFFF">用户</font><input type="text" name="textfield23" size="7">            
                <br/>
                <font color="#FFFFFF">密码</font><input type="text" name="textfield24" size="7">
              </td>
            </tr>
          </table>
    </form>      
          <p>&nbsp; </p>    
          </td>
        <td width="3" bgcolor="#FFDFEB"></td>
        <td valign="top" colspan="2" align="center"> 
          <p><br/>
          </p>
    <form method="post" action="zlsea.asp"  name="SearchForm" LANGUAGE="javascript" onsubmit="return SubmitForm()">      
          <table width="560" border="0" cellpadding="4">
            <tr> 
              <td width="70" align="center"> 
                <p>国家(地区)</p>
                </td>
              <td width="200"> 
                <p> 
                  <select name="select">
                  </select>
                </p>
              </td>
              <td width="66" align="center"> 
                <p>级 别</p>
              </td>
              <td width="72"> 
                <p> 
                  <select name="select6">
                  </select>
                </p>
              </td>
              <td width="144"> 
                <p> 密 级 
                  <select name="select11">
                  </select>
                </p>
              </td>
            </tr>
            <tr>
              <td align="center">资料分类 </td>
              <td> 
                <select name="d_edu_cat" onChange="Do_Edu_Change(this,0);">
                </select>
              </td>
              <td align="center">注 录 人</td>
              <td> 
                <select name="select7">
                </select>
              </td>
              <td>审核人 
                <select name="select12">
                </select>
              </td>
            </tr>
            <tr>
              <td align="center">二级分类 </td>
              <td> 
                <select name="x_edu_cat" onChange="Do_rj_Change(this,0);">
                </select>
              </td>
              <td align="center">注录日期</td>
              <td width="224" colspan="2"> 
                 <select name="select13">
                  </select>
              </td>
            </tr>
            <tr>
              <td align="center">三级分类 </td>
              <td> 
                <select name="z_edu_cat">
                </select>
              </td>
              <td align="center">入库单位</td>
              <td colspan="2"> 
                <select name="select8">
                </select>
              </td>
            </tr>
            <tr>
              <td align="center">主 题 词 </td>
              <td> 
                <select name="select18">
                </select>
              </td>
              <td align="center">资料来源</td>
              <td colspan="2"> 
                <select name="select9">
                </select>
              </td>
            </tr>
            <tr>
              <td align="center">标 题 </td>
              <td> 
                <select name="select14">
                </select>
              </td>
              <td align="center">备 注</td>
              <td colspan="2"> 
                <select name="select10">
                </select>
              </td>
            </tr>
          </table>
          <p> 
              <input type="text" name="textfield" size="72" value="">
          </p>
          <center><img src="images/find.gif"></center>
        </form></td>
        
      </tr>
    </table>
    </body>
    </html>