如何在点击一个下拉框的同时，访问数据库改变另一个下拉框的内容

在写一个系统，第一个下拉框中是院系，第二个下拉框中是专业，如何在改变院系的同时，专业的值域也在同时改变

解决方案 »

  1.   

    二级联动？
    在第一个select添加onchange事件，事件内容是删除第二个select的所有option  可以通过var s2=document.getElementById("select2");s2.length=0实现   然后再第二个select下循环增加option
    var o=new Option(a[se][i],a[se][i]);s2[s2.length]=o;试试
      

  2.   

    ajax,根据所选的第一个列表，去后台页面去查询所属专业。根据返回值动态调整专业下拉列表的选项。
    为了节约，可以用缓存来存返回的结果。
    以下是前台页面，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>ajax二级联动例子</title>
        <script type="text/javascript" src="jquery-1.6.4.min.js" ></script>
    </head>
    <body>
        <select id="select1">
        <option value="0">请选择院系</option>
            <option value="1">化工系</option>
            <option value="2">物理系</option>
            <option value="3">计算机系</option>
        </select>
        <select id="select2">
        <option value="0">请选择专业</option>
        </select>
        
        <script type="text/javascript" >
            $("#select1").change(function() {
                $("#select2").get(0).options.length = 1;
                if ($("#select1").val() > 0) {
                    if (!$("#select1 option:selected").data("subs")) {
                        $.get("getmajoroptions.asp", { cid: $("#select1").val() }, function(r) {
                            $("#select1 option:selected").data("subs", r); //缓存结果
                            //alert("这是第一次读数据,结果是："+r);
                            $("#select2").append(r);
                        });
                    } else {
                        $("#select2").append($("#select1 option:selected").data("subs"));
                    }            }
            });
        </script>
    </body>
    </html>后台页面getmajoroptions.asp根据查询cid返回类似
       <option value="11">化工系专业1</option>
            <option value="12">化工系专业2</option>
            <option value="13">化工系专业3</option>这样的字符
    可能的asp代码如下<%
    ''''其它非关健代码略
            set rs=conn.execute("select * from majors where cid="+request.QueryString("id"))
            while not rs.eof
                    Response.Write("<option value='"+rs("id")+"'>"+rs("name")+"</option>")
                    rs.movenext
            wend 
    %>
    以上只是ajax实现二级联动的一种方法。事实上根据不同的业务需求、数据量和存储形式，还有很多别的更高效的方法
      

  3.   

    ajax 加 json 传值
    来改变store里的记录。正常的前后台交互，不难。
      

  4.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
     </head>
     <script type="text/javascript">
    $(document).ready(function(){
    var collegeUrl;//
    var professionalUrl;//
    var ran = Math.floor(Math.random()*10000);//防止缓存
    $.get(collegeUrl+"?ran="+ran,{},function(data){
    $("#collegelist").html(data);
    })
    $("#collegelist").change(function(){
    $.get(professionalUrl+"?ran="+ran,{collegeId:$(this).val()},function(data){
    $("#professionallist").html(data);
    });
    });
    });
     </script>
     <body>
    <select id="collegelist"></select>
    <select id="professionallist"></select>
     </body>
    </html>
    其中collegeUrl professionalUrl返回HTML片段:<option></option><option></option>....
    你也可以返回XML 或者 JSON，然后利用JQUERY获取其中你想要的内容，再拼接成HTML片段