怎样才能实现2个下拉框的内容相关联?...选中一个下拉框的内容,第二个下拉框的内容随之而变,与其相对应

<html>
<head>
<title>关联下来列表</title>
<script language=javascript>
function selChange()
{
sel2.length = 0;
var option;
for(i=0;i<6;i++)
{
option = document.createElement("OPTION");
option.value = i;
option.text = "和第"+sel1.value+"个关联";
sel2.add(option);
}
}
</script>
</head>
<body>
<SELECT ID="sel1" onchange="selChange()">
<OPTION value="1">第1个</OPTION>
<OPTION value="2">第2个</OPTION>
<OPTION value="3">第3个</OPTION>
<OPTION value="4">第4个</OPTION>
</SELECT><SELECT ID="sel2">
<OPTION value=0>没有</OPTION>
</SELECT>
</body>
</html>

解决方案 »

  1.   

    发帖前请保持良好的搜索习惯，就我所知，这个问题在JS/ASP区已经是说烂的问题，给你思路：
    第一个select变化出发onchange事件后，利用xmlhttp获得对应的查询条件所产生的一系列数据（一般都是Text-Value的对应数据组)，然后根据这些动态改变第二个select的值，可以用DOM方式。
    如果对这些都不了解，可以搜索以下帖子，asp版的大灰狼曾经发过详细源码的。
      

  2.   

    <script language="Javascript">
    <!--
    var city = new Array(
    new Array("浦东新区-浦东新区","徐汇区-徐汇区","长宁区-长宁区","普陀区-普陀区","闸北区-闸北区","虹口区-虹口区","杨浦区-杨浦区","黄浦区-黄浦区","卢湾区-卢湾区","静安区-静安区","宝山区-宝山区","闵行区-闵行区","嘉定区-嘉定区","金山区-金山区","松江区-松江区","青浦区-青浦区","崇明县-崇明县","奉贤区-奉贤区","南汇区-南汇区"),
    new Array("合肥-合肥","芜湖-芜湖","蚌埠-蚌埠","巢湖-巢湖","滁州-滁州","淮南-淮南","安庆-安庆","池州-池州","宣城-宣城","马鞍山-马鞍山","黄山-黄山","铜陵-铜陵","宿州-宿州","淮北-淮北","阜阳-阜阳","其它-其它"),
    new Array("北京-北京","其它-其它")
    );function test(a,b){
    var index = a.options.selectedIndex-1;
    b.length = city[index].length;
    for(var i = 0;i<city[index].length;i++)
    {
    var text = city[index][i].split("-");
    b.options[i].text = text[0];
    b.options[i].value =text[1];
    }
    }
    //-->
    </script>
    <select name="LicenceType" onChange=test(LicenceType,b)> 
    <option>--选择城市--</option>
    <option value="aa">aa</option> 
    <option value="bb">bb</option> 
    <option value="cc">cc</option> 
    </select> 
    <select name="b">
    <option>--选择地区--</option>
    </select>
      

  3.   

    上面的那个city数组就是页面刚加载时你自己从数据库里读的，然后按着要求组成
      

  4.   

    你首先得明白：JAVASCRIPT的事件是客户端脚本，无法和服务器端交互，是无法重新读取数据库的
    也就是说，如果你想onChange()改变第二个下拉框，那么，只有两个方法：
    一、再次再次进入servlet重新检索一遍，重新生成页面。
    二、把所有的数据放入页面，在onChange的时候，在这个JSP页面中读出。
    下面是二的方法：
    如：教师和学生，一对多关系。把所有的教师和学生都放入ArrayList。
    教师用一个ArrayList存HashMap：教师编号和教师名称(teacher)
    学生用一个ArrayList存HashMap：教师编号、学生编号和学生姓名(student)
    那么
    <script language="javascript">
    function change(element)
    {
    //删除student下拉框中原有的所有项
    document.forms[0].student.options.length=0;
    var index=0;
    <%for (int i=0;i<student.size();i++)
    {HashMap h = (HashMap) student.get(i);
     String teacher_id = (String)h.get("teacher_id");
     String student_id = (String)h.get("student_id");
     String student_name = (String)h.get("student_name");
    %>
    if (element.value=="<%=teacher_id%>")
        document.forms[0].student.options[index++]=new Option("<%=student_name%>","<%=stduent_id%>");
    <%
    }
    %>
    }
    </script>
    <select name="teacher" onChange="change(this)">
    <%for (int i=0;i<teacher.size();i++){
      HashMap h = (HashMap)teacher.get(i);
      String teacher_id = (String) h.get("teacher_id");
      String teacher_name = (String) h.get("teaher_name");%>
    <option value=<%=teacher_id%>><%=teacher_name%></option>
    <%}%>
    </select>
    <select name="student" onChange="change(this)">
    <%for (int i=0;i<student.size();i++){
      HashMap h = (HashMap)teacher.get(i);
      String student_id = (String) h.get("student_id");
      String student_name = (String) h.get("student_name");%>
    <option value=<%=student_id%>><%=student_name%></option>
    <%}%>
    </select>