N 个 ASP.net DropDownList 无刷新联动菜单

 再谈 N 个 ASP.net DropDownList 无刷新联动菜单，牺牲N-1个ASPX来实现自动更新机制，避免刷新的闪动！！

以下代码绝对可以使用，也可以实现多级菜单。。。。

<script language="javascript" type="text/javascript">function load(state) { var drp2 = document.getElementById("DropDownList2"); for(var i=0;i&amp;lt;=drp2.options.length-1;i++) { drp2.remove(i); } var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP"); //发送请求 var oDoc = new ActiveXObject("MSXML2.DOMDocument"); //响应结果 var state=document.getElementById("DropDownList1").value; oHttpReq.open("post","webform6.aspx?state="+state, false); oHttpReq.send(""); result = oHttpReq.responseText; oDoc.loadXML(result);　 // items = oDoc.selectNodes("//CITY/Table"); items = oDoc.selectNodes("//address/Table");　　 for (var item = items.nextNode();item;item = items.nextNode())　　 {　　　 　var city = item.selectSingleNode("//address").nodeTypedValue;　　 　var newOption = document.createElement("OPTION");　　　 　newOption.text = city;　　　 　newOption.value = city;　　　 　drp2.options.add(newOption);　　　 　 }　 }</script>  <script language="javascript">
   function load(state)
   {
    var drp2 = document.getElementById("DropDownList2");
    for(var i=0;i<=drp2.options.length-1;i++)
    {
     drp2.remove(i);
    }
    var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");    //发送请求
    var oDoc = new ActiveXObject("MSXML2.DOMDocument");    //响应结果
    var state=document.getElementById("DropDownList1").value;
    oHttpReq.open("post","webform2.aspx?state="+state, false);
    oHttpReq.send("");
    result = oHttpReq.responseText;
    oDoc.loadXML(result);　
    
   // items = oDoc.selectNodes("//CITY/Table");
       items = oDoc.selectNodes("//address/Table");
　　   for (var item = items.nextNode();item;item = items.nextNode())
　　   {　
　　   　var city = item.selectSingleNode("//address").nodeTypedValue;
　　   　var newOption = document.createElement("OPTION");　
　　   　newOption.text = city;　
　　   　newOption.value = city;　
　　   　drp2.options.add(newOption);　
　　  　 }　
   }
  </script>

 

 

============================

webform1.aspx

private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   if(!IsPostBack)
   {
    SqlConnection con = new SqlConnection("packet size=4096;user id=sa;data source=SERVER;persist security info=False;initial catalog=pubs");
    SqlDataAdapter da = new SqlDataAdapter("select state from authors group by state",con);
    DataSet ds = new DataSet("State");
    da.Fill(ds);
    this.DropDownList1.DataSource = ds.Tables[0];
    this.DropDownList1.DataTextField = "state";
    this.DropDownList1.DataValueField = "state";　
    this.DropDownList1.DataBind();　　
    this.DropDownList1.Attributes.Add("onchange","load()");　　
    //DropDownList1.
   }
  
  }

 

webform2.aspx

 private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   if(this.Request["state"]!=null)
   {　　
    string state = this.Request["state"].ToString();　　
    SqlConnection con = new SqlConnection("packet size=4096;user id=sa;data source=SERVER;persist security info=False;initial catalog=pubs");
    SqlDataAdapter da = new SqlDataAdapter("select address from authors where state = '"+state+"'",con);　　
    DataSet ds = new DataSet("address");　　
    da.Fill(ds);　　
    XmlTextWriter writer = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding);　　
    writer.Formatting = Formatting.Indented;　　
    writer.Indentation = 4;　　
    writer.IndentChar = ' ';　　
    ds.WriteXml(writer);　　
    writer.Flush();　　
    Response.End();　　
    writer.Close();　　
   }
  }

 

---------------------------------

仔细看看``其实完全不用在响应多个DROPLIST的时候牺牲 N-1 个页面，因为所有的响应都有一个共性，为什么不可以多传一个值进行判断响应那一个方法呢？？？

var type ="type1";

 oHttpReq.open("post","webform2.aspx?state="+state+"&type="+type, false);

  string type = this.Request["type"].ToString();

switch(type)

{

    case "type1":

      .........................................

}

 

----------------------------------------------

程序需要做几处修改：

1、解决drp2、drp3清楚不完全的问题： drp2.innerText ="";  drp3.......................

2、

   for (var item = items.nextNode();item;item = items.nextNode())
　　   {　
　　   　var city = item.nodeTypedValue;
　　   　var newOption = document.createElement("OPTION");　
　　   　newOption.text = city;　
　　   　newOption.value = city;　
　　   　drp2.options.add(newOption);　
　　  　 }　
3、如果传多个值的问题也是一样``

select t1,t2 from tt

只要多加一个条件就可以解决问题

 

=======================================================

这个还有很多可以研究的问题``比如刷新后值的问题。。。。。。。。。。。。