求助:两个下拉列表框动态关联<急!!!>

<html>
<body>
联动例子
<form name=form1>
        <select name=mClass onchange="changeByValue(this.value)">
          <option value="" selected>请选择大类分区</option>
        </select>
        <select name=mKind>
          <option value="" selected>请选择小类分区</option>
        </select>
</form>
<script language=javascript><!--
var mKindouterHTML = document.form1.mKind.outerHTML.substr(0, document.form1.mKind.outerHTML.length-9);
function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,"");}
function mclass()
{
   var mclass = ["html","javascript","vbscript","css","sql","asp"];   var e = document.form1.mClass;
   var s = e.outerHTML.substr(0, e.outerHTML.length-9) + "\r\n";
       for (var i=0; i<mclass.length; i++){
       s += "<option value='"+ mclass[i] +"'>"+ mclass[i] +"</option>\r\n";}
       s += "</select>";
       e.outerHTML = s;
}  mclass();
function changeByValue(val)
{
   var mhtml       = ["html"];
   var mjavascript = ["语句","方法"]
   var mvbscript   = ["vbscript"]
   var mcss        = ["css"]
   var msql        = ["sql"]
   var masp        = ["asp"]
   
   var e = document.form1.mKind;
   var s = mKindouterHTML;
   if (val.Trim() == "") {s += "</select>"; e.outerHTML = s; return;}
   var a = eval("m"+ val);
       for (var i=0; i<a.length; i++){
       s += "<option value='"+ a[i] +"'>"+ a[i] +"</option>\r\n";}
       s += "</select>";
       e.outerHTML = s;
}
// --></script></body>
</html>值改成从服务器中读取就可以了。

解决方案 »

  1.   

    我是用JSp做的，但是这样好象也不行啊，静态的因为不怎么能实现啊，
    请你帮我看一下以下的这个代码（和你发的差不多）：运行时下拉列表框里没有值<script language=javascript>
    var professionouterHTML = document.regist.profession.outerHTML.substr(0, 
    document.regist.profession.outerHTML.length-9);
    function college()
    {
       var collegeName = ["计算机科学与技术学院","机电工程学院","空中交通管理学院","交通工程学院","管理学院","理学院","人文社会科学学院","飞行学院","安全科学与工程学院","乘务学院","职业技术学院","继续教育学院"]; //这些数据可以从数据库中取得   var e = document.regist.college;
       var s = e.outerHTML.substr(0, e.outerHTML.length-9) + "\r\n";
           for (var i=0; i<collegeName.length; i++){
           s += "<option value='"+ collegeName[i] +"'>"+ collegeName[i] +"</option>\r\n";}
           s += "</select>";
           e.outerHTML = s;
    }  college();function professionName(val)
    {
       var 计算机科学与技术学院 = ["计算机科学与技术","计算机应用技术"];
       var 机电工程学院 = ["飞行器动力工程", "电气工程及其自动化","电子信息工程","工业工程" ,"
    航空宇航推进理论与工程" ,"导航、制导与控制" ,"飞行器设计" ,"人机与环境工程","模式识别与智能系统","航空安全管理"];
       var 空中交通管理学院 = ["通信工程","交通运输","通信与信息系统","信号与信息处理","交通运
    输规划与管理","交通信息工程及控制","航空安全管理"];
       var 交通工程学院 = ["交通工程" ,"物流管理","土木工程","自动化","油气储运工程","交通运输
    规划与管理","机械电子工程"]; 
       var 管理学院 = ["工商管理","会计学","财务管理","管理科学与工程","企业管理"];
       var 理学院 = ["信息与计算科学","材料物理","材料化学","统计学","计算数学","计算机应用技术"];
       var 人文社会科学学院 = ["法学","英语"];
       var 飞行学院 = ["飞行技术"];
       var 安全科学与工程学院 = ["安全工程","安全技术及工程"];
       var 乘务学院 = ["空中乘务"];
       var 职业技术学院 = ["商务英语","飞机机电设备维修","通信技术","航空港安全检查","电子商
    务","物业管理","旅游与酒店管理","计算机网络技术","电子与信息技术","航空油料储运与应用","计
    算机软件","民航运输","民航计划财务","航材管理与外贸","民航特种车辆维修"];
       var 继续教育学院 = ["民航各类成人学历教育和在职人员岗位培训"];
       var e = document.regist.profession;
       var s = professionouterHTML;
       if (val == "") {s += "</select>"; e.outerHTML = s; return;}
       var a = eval(val);
           for (var i=0; i<a.length; i++)
           {
               s += "<option value='"+ a[i] +"'>"+ a[i] +"</option>\r\n";
           }
           s += "</select>";
           e.outerHTML = s;
    }
    </script>html 中
    <td>所在院系</td>
              <td><select name="college" size="1" id="college" onchange="professionName(this.value)">
    <option value="">请选择学院</option></select>
    所学专业<select name="profession" size="1" id="profession" >
    <option value="">请选择专业</option></select>
      

  2.   

    <form name="form1" method="post" action="PK_create.jsp">
    <select name="tablename" onChange="form1.submit()" >
    <option value="请选择表" selected请选择表</option>
    <%
    request.setCharacterEncoding("gb2312");
    String tablename=request.getParameter("tablename");
    session.setAttribute("tablename",tablename);
    String PKname=request.getParameter("constraint_PKname");
    session.setAttribute("PKname",PKname);
    if(tablename!=null)out.print("<option value='"+tablename+"' selected >"+tablename+"</option>");
    %>
    <%
        Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();  
        String url="jdbc:oracle:thin:@localhost:1521:myOracle";    
        String user="system";  
        String password="oracle";  
        Connection conn= DriverManager.getConnection(url,user,password);  
        Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
        ResultSet rs=stmt.executeQuery("select * from "+SystemName+".tablenames");
        while(rs.next()){
        String t=rs.getString(1);
        if(tablename==null)  out.print("<option value='"+t+"'>"+t+"</option>");
        else if(!(tablename.equals(t)))
        out.print("<option value='"+t+"'>"+t+"</option>");
        }
    %>
    </select>
                   </div>
          </form>        <div align="center">
            <form name="form2" method="post" action="PK_check.jsp">              <div align="center">
                    <p>
      <select name="colunmname" size="3" multiple>
                    <option value="请选择属性">请选择属性;</option>
    <%
      if(tablename!=null){
      ResultSet rs2=stmt.executeQuery("select * from "+SystemName+"."+tablename);
      ResultSetMetaData meta=rs2.getMetaData();
      int col=meta.getColumnCount();
      for(int i=1;i<=col;i++){
      out.print("<option value="+meta.getColumnName(i)+">"+meta.getColumnName(i)+"</option>");
      }
      }
      stmt.close();
      conn.close();
      %>
                    </select>
      </p>
     <p>
      <input type="submit" name="Submit" value="&Igrave;á&frac12;&raquo;">
    &nbsp;&nbsp;<br>
                    </p>
              </div>
      

  3.   

    onchange 需要放在form中：<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head>
    <script language=javascript>
    function college()
    {
       var collegeName = ["计算机科学与技术学院","机电工程学院","空中交通管理学院","交通工程学院","管理学院","理学院","人文社会科学学院","飞行学院","安全科学与工程学院","乘务学院","职业技术学院","继续教育学院"]; //这些数据可以从数据库中取得
       var a= document.regist.textfield.value;
       alert(a);
       var e = document.regist.college;
       var s = e.outerHTML.substr(0, e.outerHTML.length-9) + "\r\n";
           for (var i=0; i<collegeName.length; i++){
           s += "<option value='"+ collegeName[i] +"'>"+ collegeName[i] +"</option>\r\n";}
           s += "</select>";
           e.outerHTML = s;
    }function professionName(val)
    {
       var professionouterHTML = document.regist.profession.outerHTML.substr(0,document.regist.profession.outerHTML.length-9);
       var 计算机科学与技术学院 = ["计算机科学与技术","计算机应用技术"];
       var 机电工程学院 = ["飞行器动力工程", "电气工程及其自动化","电子信息工程","工业工程" ,"航空宇航推进理论与工程" ,"导航、制导与控制" ,"飞行器设计" ,"人机与环境工程","模式识别与智能系统","航空安全管理"];
       var 空中交通管理学院 = ["通信工程","交通运输","通信与信息系统","信号与信息处理","交通运输规划与管理","交通信息工程及控制","航空安全管理"];
       var 交通工程学院 = ["交通工程" ,"物流管理","土木工程","自动化","油气储运工程","交通运输规划与管理","机械电子工程"]; 
       var 管理学院 = ["工商管理","会计学","财务管理","管理科学与工程","企业管理"];
       var 理学院 = ["信息与计算科学","材料物理","材料化学","统计学","计算数学","计算机应用技术"];
       var 人文社会科学学院 = ["法学","英语"];
       var 飞行学院 = ["飞行技术"];
       var 安全科学与工程学院 = ["安全工程","安全技术及工程"];
       var 乘务学院 = ["空中乘务"];
       var 职业技术学院 = ["商务英语","飞机机电设备维修","通信技术","航空港安全检查","电子商务","物业管理","旅游与酒店管理","计算机网络技术","电子与信息技术","航空油料储运与应用","计算机软件","民航运输","民航计划财务","航材管理与外贸","民航特种车辆维修"];
       var 继续教育学院 = ["民航各类成人学历教育和在职人员岗位培训"];
       var e = document.regist.profession;
       var s = professionouterHTML;
       if (val == "") {s += "</select>"; e.outerHTML = s; return;}
       var a = eval(val);
           for (var i=0; i<a.length; i++)
           {
               s += "<option value='"+ a[i] +"'>"+ a[i] +"</option>\r\n";
           }
           s += "</select>";
           e.outerHTML = s;
    }
    </script>
    <body onLoad="college()">
    <form name ="regist" method="post" action="">
    <table>
    <tr>
    <td>所在院系</td>
              <td><select name="college" size="1" id="college" onchange="professionName(this.value)">
    <option value="">请选择学院</option></select>
    所学专业<select name="profession" size="1" id="profession" >
    <option value="">请选择专业</option></select>
    </tr>
    </table>
    </form>
    </body>
    </html>
      

  4.   

    谢谢各位的帮忙,但我已经把onchange放在form里了,但还是没有值啊.
      

  5.   

    2维的不是那么夸张把：
        在第一个下拉框后加上 onChange="selectDept(this.value)"
    var biztype = new Array();
            <%
                 /*生成Javascript代码,控制部门选择后支出类型的联动*/
                 for (int i = 0; i < parentbizes.size(); i++) {
                     Business biz = (Business) parentbizes.get(i);
            %>
                     biztype[<%=i%>]=new Array('<%=biz.getDept().getId()%>', '<%=StringUtils.echoSpace(biz.getBizlevel().intValue()) + biz.getBusinessName()%>', '<%=biz.getId()%>');
            <%
                 }
            %><%--    取出所有属于选定部门的支出类型      --%>
            function selectDept(deptid) {
                document.ExpenseQuery.parentbizID.length = 0;
    <%--        设定支出类型select的第一项      --%>
                document.ExpenseQuery.parentbizID.options[0] = new Option('不属于任何分类', '0');
                for (i = 0; i < biztype.length; i++) {
                    if (biztype[i][0] == deptid) {
    <%--                把biztype数组中第一列中的值等于指定部门的id的行的2,3两列值(支出类型名, 支出类型对应的business id) 取出来作为支出类型select的项   --%>
                        document.ExpenseQuery.parentbizID.options[document.ExpenseQuery.parentbizID.length] = new Option(biztype[i][1], biztype[i][2]);
                    }
                 }
            }
    <%--    支出类型select初始化   --%>
            selectDept(document.ExpenseQuery.deptID.value);难得写啦 考了段我程序的代码 你看看吧