现在我要做一个JSP页面,有两个下拉框需要关联,也就是选择了第一个下拉框里的内容,第二个下拉框的内容跟着改变,例如:选择了第一个下拉框里的1,第二个下拉框里内容变成A, B C;选择了第一个下拉框里的2,那么第二个下拉框里内容变成 d , e,f;谁帮帮我啊,用JAVASCRIPT控制~~,谁能帮我把代码写出来啊~~~~~~这个页面就只有这两个下拉框~~~

解决方案 »

  1.   

    <script>
    function Muti_List(eOutput, oGames)
    {
    Expand(eOutput, oGames, eOutput);
    }function RemoveChild(eElement)
    {
    while(eElement = eElement.eChild)
    {
    eElement.removeNode(true);
    }
    }function Expand(eParent, oObject, eOutput)
    {
    var eSelect = document.createElement("SELECT");
    eParent.insertAdjacentElement("afterEnd",eSelect);
    eParent.eChild = eSelect;
    eSelect.oData = oObject;var eOption;
    eOption = document.createElement("OPTION");
    eSelect.options.add(eOption);var key;
    for(key in oObject)
    {
    eOption = document.createElement("OPTION");
    eSelect.options.add(eOption);
    eOption.innerText = key;
    eOption.oData = oObject[key];
    }
    eSelect.onchange = function ()
    {
    RemoveChild(eSelect);
    var eSelectedOption = eSelect.options[eSelect.selectedIndex];
    var oData = eSelectedOption.oData;
    if(oData)
    {
    if(typeof(oData) == "string")
    {
    eOutput.value = oData;
    }
    else
    {
    eOutput.value = "请选择下拉列表";
    Expand(eSelect, oData, eOutput);
    }
    }
    else
    {
    eOutput.value = "请选择下拉列表";
    }}
    }
    </script><script>
    var oServerData = new Object;
    oServerData["大话II"] = new Object;
    oServerData["大话II"]["推荐"] = new Object;
    oServerData["大话II"]["推荐"]["粤韵飘香"] = "大话II.粤韵飘香";
    oServerData["大话II"]["天界"] = new Object;
    oServerData["大话II"]["天界"]["云中殿"] = "大话II.云中殿";
    oServerData["大话II"]["天界"]["御花园"] = "大话II.御花园";
    oServerData["大话II"]["天界"]["帝尧宫"] = "大话II.帝尧宫";
    oServerData["大话II"]["天界"]["吉祥天"] = "大话II.吉祥天";
    oServerData["大话II"]["地界"] = new Object;
    oServerData["大话II"]["地界"]["车迟国"] = "大话II.车迟国";
    oServerData["大话II"]["地界"]["流沙河"] = "大话II.流沙河";
    oServerData["大话II"]["地界"]["朱紫国"] = "大话II.朱紫国";
    oServerData["大话II"]["地界"]["钦法国"] = "大话II.钦法国";
    oServerData["大话II"]["地界"]["月陀国"] = "大话II.月陀国";
    oServerData["大话II"]["地界"]["高老庄"] = "大话II.高老庄";
    oServerData["大话II"]["人界"] = new Object;
    oServerData["大话II"]["人界"]["陷空山"] = "大话II.陷空山";
    oServerData["大话II"]["人界"]["火云洞"] = "大话II.火云洞";
    oServerData["大话II"]["人界"]["莲花山"] = "大话II.莲花山";
    oServerData["大话II"]["修罗"] = new Object;
    oServerData["大话II"]["修罗"]["华山论剑"] = "大话II.华山论剑";
    oServerData["大话II"]["修罗"]["情系今生"] = "大话II.情系今生";
    oServerData["大话II"]["修罗"]["彩云之南"] = "大话II.彩云之南";
    oServerData["大话II"]["修罗"]["至尊宝"] = "大话II.至尊宝";oServerData["梦幻"] = new Object;
    oServerData["梦幻"]["湖南区"] = new Object;
    oServerData["梦幻"]["湖南区"]["岳阳楼"] = "梦幻.岳阳楼";
    oServerData["梦幻"]["湖南区"]["橘子洲"] = "梦幻.橘子洲";
    oServerData["梦幻"]["湖南区"]["浏阳河"] = "梦幻.浏阳河";
    oServerData["梦幻"]["湖南区"]["洞庭湖"] = "梦幻.洞庭湖";
    oServerData["梦幻"]["追忆"] = new Object;
    oServerData["梦幻"]["追忆"]["梦回奔日"] = "梦幻.梦回奔日";
    oServerData["梦幻"]["追忆"]["梦回望月"] = "梦幻.梦回望月";
    oServerData["梦幻"]["追忆"]["再续前缘"] = "梦幻.再续前缘";
    oServerData["梦幻"]["追忆"]["青山绿水"] = "梦幻.青山绿水";
    oServerData["梦幻"]["推荐区"] = new Object;
    oServerData["梦幻"]["推荐区"]["碧海银沙"] = "梦幻.碧海银沙";
    oServerData["梦幻"]["推荐区"]["富乐山"] = "梦幻.富乐山";
    oServerData["梦幻"]["推荐区"]["华顶山庄"] = "梦幻.华顶山庄";
    oServerData["梦幻"]["推荐区"]["群英荟萃"] = "梦幻.群英荟萃";</script>
    <input type="text" name="GroupName" readonly value="请选择下拉列表">
    <script language="jscript">
    Muti_List(document.all.GroupName,oServerData);
    </script>
      

  2.   

    <form name="frm">
    <select name=school onchange="MulSelect(1)"></select>
    <select name=department onkeypress=sortMe(this) onchange="MulSelect(2)"></select>
    <select name=grade onchange="MulSelect(3)"></select>
    <select name=student></select>
    <p> </p>
    </form><script>
    // 四级联动
    var arrSel=["school","department","grade","student"]
    arrData=[];// 从数据库中读出四级联动的数据, 保存到 arrData 数组中(二维数组)
    <%
    dim conn,rs
    set conn = Server.CreateObject("ADODB.Connection")
    conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("test.mdb") & ";Persist Security Info=False"
    set rs=conn.execute("select * from dbselect")
    do while not rs.eof
    %>arrData[arrData.length]=["<%=trim(rs("school"))%>","<%=trim(rs("department"))%>","<%=trim(rs("grade"))%>","<%=trim(rs("student"))%>"]<%
    rs.movenext
    loop
    rs.close:set rs=nothing
    conn.close:set conn=nothing
    %>
    </script><script>
    // 下拉框选择变化时触发的函数,用于重新生成其下级下拉框
    // num : 下拉框的级数, 1 表示最顶级
    function MulSelect(num)
    {
    var i,j,arrTemp=[];
    // 取得表单当前触发的下拉框的父级下拉框的值, 存放于 arrTemp 数组中(即不需要改变的值)
    for(i=0;i<num;i++)
    {
    arrTemp[i]=eval("document.frm."+arrSel[i]).value
    }
    if(num<arrSel.length)
    {
    // 对于触发下拉框的下一级的下拉框
    with(eval("document.frm."+arrSel[num]))
    {
    // 先清空内容
    length=0
    // 对所有的记录遍历
    for(i=0;i<arrData.length;i++)
    {
    var find=false// 如果父级下拉框的记录不是当前选中的值,则跳过
    for(j=0;j<num;j++)
    {
    if(arrTemp[j]!=arrData[i][j])
    {
    break;
    }
    }
    if(j!=num)
    {
    continue;
    }
    // 这里已经可以保证第 i 项记录的数据属于当前选项的子数据// 检查循环过程中是否已经添加了该选项,如果已有了, 则 fine = true
    for(m=0;m<options.length;m++)
    {
    if(options[m].text==arrData[i][num])
    {
    find=true
    }
    }
    // 若当前没有选项或者尚未添加该选项项,则添加之
    if(length==0||!find)
    {
    options[options.length]=new Option(arrData[i][num],arrData[i][num])
    }
    }// 递归调用生成下一级菜单的内容
    MulSelect((num+1))
    }
    }
    }// 调用联动函数初始化下拉框
    MulSelect(0)
    </script>
      

  3.   

    看不明白啊,能不能用JAVASCRIPT写,两个下拉框的内容都是从数据库读出来的,求求帮帮忙啊
      

  4.   

    --用的是MSSQLSERVER中的pubs数据库--建表
    create table state
    (
    id int IDENTITY,
    name varchar(20)
    )create table city
    (
    id int IDENTITY,
    stateid int, 
    name varchar(20)
    )--生成测试数据
    insert into state(name) values('湖南省')
    insert into state(name) values('湖北省')insert into city(stateid, name) values(1, '长沙')
    insert into city(stateid, name) values(1, '郴州')
    insert into city(stateid, name) values(1, '怀化')
    insert into city(stateid, name) values(2, '武汉')
    insert into city(stateid, name) values(2, '十堰')
    insert into city(stateid, name) values(2, '荆州')
      

  5.   

    <%@ page contentType="text/html; charset=UTF-8" %>
    <%@ page import="java.sql.*"%> <!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=UTF-8">
    <title>Untitled Document</title>
    <script>
    <!--
    function doChange(){
    var url = "test.jsp";
    var par = document.all.state.options[document.all.state.selectedIndex].value;
    window.location.href = url + "?stateid=" + par;
    }
    //-->
    </script>
    </head><body><%  
    Connection conn = null;
    ResultSet rs = null;
    String strStateId = request.getParameter("stateid");
    if(strStateId == null || "".equals(strStateId)){
    strStateId = "1";
    }
    try{
    Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver").newInstance(); 
    String url="jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=pubs"; 
    //pubs is your database
    String user="sa"; 
    String password=""; 
    conn = DriverManager.getConnection(url,user,password); 
    Statement stmt = conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE); 
    String sql = "select id, name from state"; 
    rs = stmt.executeQuery(sql);
    out.println("<select name='state' onChange='doChange()'>");
    while(rs.next()){
    String tempid = "" + rs.getInt("id");
    if(tempid.equals(strStateId)){
    out.println("<option value='" + tempid + "' selected>" + rs.getString("name"));
    }else{
    out.println("<option value='" + tempid + "'>" + rs.getString("name"));
    }
    }
    out.println("</select>");
    sql = "select id, stateid, name from city where stateid = " + strStateId;
    rs = stmt.executeQuery(sql);
    out.println("<select>");
    while(rs.next()){
    out.println("<option value='" + rs.getInt("id")+ "'>" + rs.getString("name"));
    }
    out.println("</select>");
    }catch(Exception e){
    out.println(e.getMessage());
    }finally{
    rs.close();
    conn.close();
    }
    %>
    </body>
    </html>