无刷新关联下拉列表 (xmlhttp + js)

项目中做了一个无刷新关联的下拉列表，网上找的代码，使用xmlhttp和js的，调试了半天最后问题解决，把代码贴在这里。使用Ajax也可以，不过我还没学。

 

在页面文件中添加js函数 

    <script language="javascript" type="text/javascript">
           //关联无刷新 点击部门下拉列表，显示人员列表                     
          function load(state)
          {
          var drp2 = document.getElementById("ddlCustomer");
          for(i = drp2.length; i >= 0; i --)
          {
          drp2.options.remove(i);//清楚人员列表
          }
                     
          var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
          var oDoc = new ActiveXObject("MSXML2.DOMDocument");
          oHttpReq.open("POST", "getData.aspx?ID=" + escape(state), false); //传值, 中文使用escapa()
          oHttpReq.send("");
          var result = oHttpReq.responseText;
          oDoc.loadXML(result); //得到返回的xml数据
          
          items1 = oDoc.selectNodes("//dsName/User/Name");
          items2 = oDoc.selectNodes("//dsName/User/ID");  //选择需要的字段   
 
          var itemsLength=items1.length;          
          for(i=0;i<itemsLength;i++)
          {
          var newOption = document.createElement("OPTION");
          newOption.value=items2[i].text;
          newOption.text=items1[i].text;
          drp2.options.add(newOption);
          }
          }          
          window.onload = function() //初次加载
          { 
          var drp1 = document.getElementById("ddlApplicationDepartment");
          load(drp1.options.value);
          }             
                    
    </script>

 

后台.cs文件中为下拉列表添加属性 

ddlApplicationDepartment.Attributes.Add("onchange", "load(this.options[this.selectedIndex].value)");

  

getData.aspx 为空页面，用于从数据库中取值 

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                string strid = Request.QueryString[DepartmentData.ID_FIELD];
                if (!string.IsNullOrEmpty(strid))
                {
                    int id = Convert.ToInt32(strid);
                    UserData data = (new UserLogic()).GetUsersByDepartmentID(id);//获取数据
                    if (data != null)
                    {
                        data.DataSetName = "dsName"; 

                        XmlTextWriter writer = new XmlTextWriter(Response.OutputStream,Response.ContentEncoding);
                        writer.Formatting = Formatting.Indented;
                        writer.Indentation = 4;
                        writer.IndentChar = ' ';
                        writer.WriteStartDocument();
                        data.WriteXml(writer);
                        writer.Flush();
                        Response.End();
                        writer.Close();
                    }
                }           
            }
        }

 

 

在调试的时候，先test一下getData.aspx?ID=,的 xml文件，可以先把xml文件写到本地文件中去。