asp.net中使用AJAX實現連動DropDownList連動

來源:互聯網
上載者:User
ajax|asp.net

以下代碼絕對可以使用,也可以實現多級菜單。。。。

  <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();  
   }
  }

 



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.