新手在线急求：下拉列表绑定数据库表字段值！

RT：页面上有两个下拉列表，每一次加载页面时，绑定字段值到第一个下拉列表，选择第一个下拉列表时，绑定另外一个字段值到第二个下拉列表，也在同一个页面上显示！！！　　求高手进来帮忙！新手小弟，先多谢撒！！！
　　解了就结贴

解决方案 »

  1.   

    这种的话，实现方案已经有很多种了：
    1: 新流行的ajax方案。
    2：刷新整个页面方案
    3：iframe组合部分刷新方案
    4：load到本地，js控制方案
      

  2.   

    前提两个下拉列表字段是一对多的关系
    在第一次加载页面的时候把第一下拉列表的值读取出来,再点击第一个下拉列表的时候,在它的onChange事件里提交表单到本页面,然后到数据库再根据第一个下拉的值去查询出第二个下拉的内容就OK了...
      

  3.   

    大家的方案都不错啊！！！谢谢啦！！！！！　楼下贴一段select控件绑定数据的代码呀！
      

  4.   

    <html>
    <head>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    //第一维:第一个下拉列表的值
    //第二维:表示下拉列表中看到的字符串
    //第三维:表示下拉列表中的值
    var subcat = new Array();
    //如果大类的值是动态的,则可以通过数据库中取出作如下设置
    //subcat[<%=count%>] = new Array('<%=trim(rs("leemaid"))%>','<%=rs("leemaconte nt")%>','<%=rs("leemacontent")%>'); 
    subcat[0] = new Array('1','电视机','=1') 
    subcat[1] = new Array('1','电风扇','=2')
    subcat[2] = new Array('1','电饭煲','=3')
    subcat[3] = new Array('1','电炒锅','=4')
    subcat[4] = new Array('1','电灯','=5')
    subcat[5] = new Array('1','电脑','=6')
    subcat[6] = new Array('1','电冰箱','=7')
    subcat[7] = new Array('1','洗衣机','=8')
    subcat[8] = new Array('1','微波炉','=9')
    subcat[9] = new Array('1','VCD影碟机','=1')
    subcat[10] = new Array('2','二极管','=11')
    subcat[11] = new Array('2','三极管','=12')
    subcat[12] = new Array('2','CMOS集成块','=13')
    subcat[13] = new Array('2','电阻','=14')
    subcat[14] = new Array('2','电容','=15')
    subcat[15] = new Array('2','整流二极管','=16')
    subcat[16] = new Array('2','整流桥','=17')
    subcat[17] = new Array('2','可控硅','=18')
    subcat[18] = new Array('2','电子枪','=19')
    subcat[19] = new Array('2','光敏二极管','=2')
    function changeselect1(selectValue)
    {
    document.form1.s2.length = 0;//初始化下拉列表 清空下拉数据
    //document.form1.s2.options[0] = new Option('请选择二级小类','');//给第一个值
    for (i=0; i<subcat.length; i++)//legth=2
    {
    if (subcat[i][0] == selectValue)//[0] [1] 第一列 第二列 
    {
    document.form1.s2.options[document.form1.s2.length] = new Option(subcat[i][1], subcat[i][2]);
    }
    }
    }
    //-->
    </script>
    <form name="form1">
    二级联动：
    <select name="s1" onChange="changeselect1(this.value)">
    <option>请选择一级大类</option>
    <option value="1">家用电器</option>
    <option value="2">电子元器件</option>
    </select>
    <select name="s2" onChange="alert(this.value)"> 
    <option>请选择二级小类</option>
    </select>
    </form>
    </html>
      

  5.   

    找二三级联动资料看看，你的是二级联动，有从数据库获得的，有先定义的，
    下面一个从数据库的三级联动：
    <%@ page language="java" import="java.util.*,java.lang.*,java.sql.*" pageEncoding="GB18030"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     <head>
     <script language="javascript">
      var DeparmentCount; //三级联动菜单代码
      DeparmentCount = 0;
      var DivisionCount;
      DivisionCount = 0;
      var SpecialityCount;
      SpecialityCount = 0
      Department = new Array();
      Division = new Array();
      Speciality = new Array();
    <%
      //system.pub.oraclesql myDao = new system.pub.oraclesql();
     Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
     Connection con=DriverManager.getConnection("jdbc:odbc:test","","");
     Statement state=con.createStatement(java.sql.ResultSet.TYPE_SCROLL_INSENSITIVE,java.sql.ResultSet.CONCUR_READ_ONLY);
     ResultSet rs = state.executeQuery("select * from division");
      int i=0;
      for(rs.next();!rs.isAfterLast();rs.next(),i++){%>
       Division[<%=i%>] = new Array("<%=rs.getString("Division_name")%>","<%=rs.getString("department_id")%>","<%=rs.getString("id")%>");
    <%  }%>
      DivisionCount = <%=i%>;<%
      System.out.println("debug....1");
      rs = state.executeQuery("select * from speciality");
      i=0;
      for(rs.next();!rs.isAfterLast();rs.next(),i++){%>
       Speciality[<%=i%>] = new Array("<%=rs.getString("Speciality_name")%>","<%=rs.getString("division_id")%>","<%=rs.getString("id")%>");
    <%  }%>
      SpecialityCount = <%=i%>;
       
    function changeDepartment(DepartmentId){
     document.form1.Switch.value="false";
     document.form1.division.length = 0;
         var DepartmentId = DepartmentId;
         var i;
         for (i=0;i < DivisionCount; i++){
             if (Division[i][1] == DepartmentId){ 
           document.form1.division.options[document.form1.division.length] = new Option(Division[i][0], Division[i][2]);
                 }        
            }
           changeDivision(document.form1.division.value);
    }function changeDivision(DivisionId){
     document.form1.Switch.value="false";
        document.form1.speciality.length = 0;
     var DivisionId = DivisionId;
        var i;
        for (i=0;i < SpecialityCount; i++){
      if (Speciality[i][1] == DivisionId){ 
              document.form1.speciality.options[document.form1.speciality.length] = new Option(Speciality[i][0], Speciality[i][2]);
            }        
     }
     if(document.form1.speciality.length!=0){
      document.form1.speciality.style.visibility = 'visible';
     }
     else{  
      document.form1.speciality.style.visibility = 'hidden';
     }
    }function  initialSelect(){
    changeDepartment(document.form1.department.options[document.form1.department.selectedIndex].value);
    }
    </script>
      </head>
      
      <body onLoad="initialSelect();">
    <form name="form1">
       <select name="department" size="1" id="department" style="width:20%" onChange="changeDepartment(document.form1.department.options[document.form1.department.selectedIndex].value)">
    <%
      rs = state.executeQuery("select * from department");
      i=0;
      for(rs.next();!rs.isAfterLast();rs.next(),i++){%>
       <option value="<%=rs.getString("id")%>"><%=rs.getString("Department_name")%></option>
    <%  }%> 
     </select>
     
        <select name="division" size="1" id="division" onChange="changeDivision(document.form1.division.options[document.form1.division.selectedIndex].value)">
     </select> 
       
     <input type="hidden" name="Switch" value="false"> <select name="speciality"  size="1">
     </select>
    </form>
      </body>
    </html>
      

  6.   

    看数据量，少的话，初期全部load,多的话就用ajax了