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

  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
 }
}






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

posted @ 2006-11-13 11:15  翅膀  阅读(569)  评论(0)    收藏  举报