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

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

   < 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

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

 

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

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




Trackback: http: // tb.blog.csdn.net/TrackBack.aspx?PostId=548121

 

 

程序演示地址：http: // www.718.com.cn/other/Example.aspx

在网上看到了一些无刷新的联动控件。下下了测试以后，显示英文和数字可以，但是不可以显示中文，后来把从网上down下来的文件做了一个翻修改，做了一个省市的联动控件。给大家共享一下。可以显示中文了。

 



<% @ Page language = " c# "  Codebehind = " Example.aspx.cs "  AutoEventWireup = " false "  Inherits = " Webs.other.Example "   %>  
< HTML >  
< HEAD >  
< title > Example </ title >  
< meta name = " GENERATOR "  Content = " Microsoft Visual Studio .NET 7.1 " >  
< meta name = " CODE_LANGUAGE "  Content = " C# " >  
< meta name = " vs_defaultClientScript "  content = " JavaScript " >  
< meta name = " vs_targetSchema "  content = " http://schemas.microsoft.com/intellisense/ie5 " >  
< script >  
function load(state) { 
var drp2 = document.getElementById("DropDownList2"); 
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?state="+state, false); 
oHttpReq.send(""); 
result = oHttpReq.responseText; 
oDoc.loadXML(result); 
items1 = oDoc.selectNodes("//CITY/Table/Id"); 
items2 = oDoc.selectNodes("//CITY/Table/shiname"); 

var itemsLength=items1.length; 
　　for(i=0;i<itemsLength;i++) 

//将小类的类名和编号赋予DropDownList2 
　　{ 
　　var newOption = document.createElement("OPTION"); 
　　newOption.text=items2[i].text; 
　　newOption.value=items1[i].text; 
　　drp2.options.add(newOption); 
　　} 
}  
window.onload  =  function() {load('1');}  

</ script >  
</ HEAD >  
< body MS_POSITIONING = " FlowLayout " >  
< form id = " Form1 "  method = " post "  runat = " server " >  
< asp:DropDownList id = " DropDownList1 "  runat = " server " ></ asp:DropDownList >  
< asp:DropDownList id = " DropDownList2 "  runat = " server " ></ asp:DropDownList >  
< asp:TextBox id = " TH "  runat = " server " ></ asp:TextBox >  
< asp:Button id = " Button1 "  runat = " server "  Text = " Button " ></ asp:Button >  
</ form >  
</ body >  
</ HTML >  


cs源文件:

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;
using  System.Data.SqlClient;

namespace  Webs.other
{
 /**//// <summary>
 /// Example 的摘要说明。
 /// </summary>
 public class Example : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.DropDownList DropDownList1;
  protected System.Web.UI.WebControls.TextBox TH;
  protected System.Web.UI.WebControls.Button Button1;
  protected System.Web.UI.WebControls.DropDownList DropDownList2;
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   if(!this.IsPostBack)
   {
    // 建立数据源加载第一个DropDownList，也可以默认加载第二个
    SqlConnection con = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings.Get("connStr1"));
    SqlDataAdapter da = new SqlDataAdapter("select Id,shengname from Province",con);
    DataSet ds = new DataSet();
    da.Fill(ds);
    this.DropDownList1.DataSource = ds;
    this.DropDownList1.DataTextField = "shengname";
    this.DropDownList1.DataValueField = "Id";
    this.DropDownList1.DataBind();
    // 这里是绑定客户端事件，当第一个DropDownList的选项改变时激发下面的事件onchange，这个事件将调用一个客户端方法load()
    this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].value)");
   }
  }

  Web Form Designer generated code#region Web Form Designer generated code
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /**//// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {    
   this.Button1.Click += new System.EventHandler(this.Button1_Click);
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion

  private void Button1_Click(object sender, System.EventArgs e)
  {
   TH.Text=this.Request.Form["DropDownList2"].ToString();
  }
 }
}


 

getdata源文件

 

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;
using  System.Data.SqlClient;
using  System.Xml;
using  System.Configuration;
using  System.Text;

namespace  Webs.other
{
 /**//// <summary>
 /// GetData 的摘要说明。
 /// </summary>
 public class GetData : System.Web.UI.Page
 {
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   //Response.Write(Request["state"]);
   int shengNo=int.Parse(Request["state"].ToString());   
   SqlConnection con = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings.Get("connStr1"));
   SqlDataAdapter da = new SqlDataAdapter("select Id,shiname from City where Shengid='"+shengNo+"'",con);
   DataSet ds = new DataSet("CITY");
   da.Fill(ds);

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

  Web Form Designer generated code#region Web Form Designer generated code
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /**//// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {    
   this.Load += new System.EventHandler(this.Page_Load);
  }
  #endregion
 }
}






Trackback: http: // tb.blog.csdn.net/TrackBack.aspx?PostId=472917


 

 ASP.net DropDownList 无刷新联动！ 
< TITLE > WebForm2 </ TITLE >
   < SCRIPT language = ' javascript ' >  
  function load() { 
    var drp2 = document.getElementById("DropDownList2"); 
    drp2.innerText="";
    for(var i = 0;i<=drp2.options.length -1;i++){ 
     drp2.remove(i); 
    } 
    var drp3 = document.getElementById("DropDownList3"); 
    for(var i = 0;i<=drp3.options.length -1;i++){ 
     drp3.remove(i); 
    } 
    var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP"); 
    var oDoc = new ActiveXObject("MSXML2.DOMDocument"); 
    var state=document.getElementById("DropDownList1").value;
    xmlhttp.open("POST", "webform1.aspx?id="+state,false);
    xmlhttp.send("");
    var res=oDoc.loadXML(xmlhttp.responseText);
    var naItems = oDoc.selectNodes("//Market/Table/maName"); 
    var idItems = oDoc.selectNodes("//Market/Table/maId"); 
    var item;
    var id;
    for (item = naItems.nextNode(),id=idItems.nextNode(); item&&id; item = naItems.nextNode(),id=idItems.nextNode()){ 
     var nastr = item.nodeTypedValue; 
     var idstr = id.nodeTypedValue;
     var newOption = document.createElement("OPTION"); 
     newOption.text =nastr; 
     newOption.value = idstr; 
     
     
     drp2.options.add(newOption); 
    } 
    load2();
  
  }  
  function load2() { 
    var drp2 = document.getElementById("DropDownList3"); 
    drp2.innerText="";
    for(var i = 0;i<=drp2.options.length -1;i++){ 
     drp2.remove(i); 
    } 
    var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP"); 
    var oDoc = new ActiveXObject("MSXML2.DOMDocument"); 
    var state=document.getElementById("DropDownList2").value;
    xmlhttp.open("POST", "webform3.aspx?id="+state,false);
    xmlhttp.send("");
    var res=oDoc.loadXML(xmlhttp.responseText);
    var naItems = oDoc.selectNodes("//Market/Table/maName"); 
    var idItems = oDoc.selectNodes("//Market/Table/maId"); 
    var item;
    var id;
    for (item = naItems.nextNode(),id=idItems.nextNode(); item&&id; item = naItems.nextNode(),id=idItems.nextNode()){ 
     var nastr = item.nodeTypedValue; 
     var idstr = id.nodeTypedValue;
     var newOption = document.createElement("OPTION"); 
     newOption.text =nastr; 
     newOption.value = idstr; 
     
     
     drp2.options.add(newOption); 
    } 
  
  }  
   </ SCRIPT >
  </ HEAD >
  < BODY ms_positioning = " GridLayout "  onload = " load() " >
   < FORM id = " Form1 "  method = " post "  runat = " server " >
    < ASP:DROPDOWNLIST id = " DropDownList1 "  runat = " server " ></ ASP:DROPDOWNLIST >
    < ASP:DROPDOWNLIST id = " DropDownList2 "  runat = " server " ></ ASP:DROPDOWNLIST >
    < ASP:DROPDOWNLIST id = " Dropdownlist3 "  runat = " server " ></ ASP:DROPDOWNLIST >
   </ FORM >
  </ BODY >
</ HTML >
-----------------------
namespace  dropDown
{
 /**//// <summary>
 /// WebForm2 的摘要说明。
 /// </summary>
 public class WebForm2 : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.DropDownList DropDownList1;
  protected System.Web.UI.WebControls.DropDownList Dropdownlist3;
  protected System.Web.UI.WebControls.DropDownList DropDownList2;
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   if(!this.IsPostBack)
   { 
    SqlConnection con = new SqlConnection("server=localhost;database=star;uid=sa;pwd="); 
    SqlDataAdapter da = new SqlDataAdapter("select maId,maName from tabMarket  where maCls=0",con); 
    DataSet ds = new DataSet(); 
    da.Fill(ds,"op");
    this.DropDownList1.DataSource=ds.Tables[0];
    this.DropDownList1.DataTextField = "maName"; 
    this.DropDownList1.DataValueField = "maId"; 
    this.DropDownList1.DataBind(); 
    this.DropDownList1.Attributes.Add("onchange","load()"); 
    this.DropDownList2.Attributes.Add("onchange","load2()");
   } 


  }

 }
}
-----------------------
public   class  WebForm1 : System.Web.UI.Page
  {
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   // Put user code to initialize the page here 
   //if(this.Request["state"]!=null)
   //{  
     string id =this.Request["id"]; 
    SqlConnection con = new SqlConnection("server=localhost;database=star;uid=sa;pwd=;"); 
    SqlDataAdapter da = new SqlDataAdapter("select maName,maId  from tabMarket where maParent=@id and maSt=1 ",con); 
       da.SelectCommand.Parameters.Add("@id",id);
    DataSet ds = new DataSet("Market"); 
    da.Fill(ds); 
   
       ds.WriteXml(Response.OutputStream);
       Response.Flush ();
       Response.End ();
       
   //}
  }
       }
-----------------------------
  public   class  WebForm3 : System.Web.UI.Page
  {
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   string id =Request["id"]; 
   SqlConnection con = new SqlConnection("server=localhost;database=star;uid=sa;pwd=;"); 
   SqlDataAdapter da = new SqlDataAdapter("select maName,maId  from tabMarket where maParent=@id and maSt=1",con); 
   da.SelectCommand.Parameters.Add("@id",id);
   DataSet ds = new DataSet("Market"); 
   da.Fill(ds); 
   
   ds.WriteXml(Response.OutputStream);
   Response.Flush ();
   Response.End ();
  }
       }