另类无刷新、联动下拉列表框(二级+XMLHttpRequest)

原创 2006年05月25日 01:50:00

二级的联动下拉列表,从思路上讲,大致分下列几步:

一:触发第一个下拉列表的onchange事件。

二:异步调用处理页后,会返回处理请求后的信息(服务器端用Response.Write方法写入要返回的字符串,客户端用responseText属性接收字符串。

三:用得到的字符串处理后更新第二个下拉列表框

主要代码如下:

一:建立读取XML的类,这里也可以是数据库的查询

public class ReadXmlCS
 {
  public const string k = "|";
  public const string s = ",";
  public ReadXmlCS()
  {
   //
   // TODO: 在此处添加构造函数逻辑
   //
  }

  public static string QueryXml(string filename,string querystr)// @"//Pro_class/@id"
  {
   System.Text.StringBuilder sb = new System.Text.StringBuilder();
   System.Xml.XPath.XPathDocument myXPathDocument = new System.Xml.XPath.XPathDocument(filename);
   System.Xml.XPath.XPathNavigator myXPathNavigator = myXPathDocument.CreateNavigator();
   try
   {
    System.Xml.XPath.XPathNodeIterator myXPathNodeIterator = myXPathNavigator.Select(querystr);
    while(myXPathNodeIterator.MoveNext())
    {
     sb.Append(myXPathNodeIterator.Current.Value.ToString() +",");//把属性值添加到字符串末尾,添加分组字符“,”
     System.Xml.XPath.XPathNavigator myXPathNavigator2 = myXPathNodeIterator.Current.Clone();//克隆当前接点
//     while(myXPathNavigator2.MoveToNextAttribute())//移动指针到下一个属性
//     {
//      sb.Append(myXPathNavigator2.Value.ToString()+"|");//把属性值添加到字符串末尾,添加分组字符“|”
//     }
     myXPathNavigator2.MoveToNextAttribute();
     sb.Append(myXPathNavigator2.Value.ToString()+"|");
     
    }
    return sb.ToString();
   }
   catch{return null;}
  }

  public static void QueryXml(string filename,string querystr,System.Web.UI.WebControls.DropDownList dd)// @"//Pro_class/@id"
  {
   System.Xml.XPath.XPathDocument myXPathDocument = new System.Xml.XPath.XPathDocument(filename);
   System.Xml.XPath.XPathNavigator myXPathNavigator = myXPathDocument.CreateNavigator();
   try
   {
    System.Xml.XPath.XPathNodeIterator myXPathNodeIterator = myXPathNavigator.Select(querystr);
    while(myXPathNodeIterator.MoveNext())
    {
     System.Web.UI.WebControls.ListItem li = new System.Web.UI.WebControls.ListItem();
     li.Value = myXPathNodeIterator.Current.Value.ToString() ;//把属性值(id)添加到ListItem的“值”属性
     System.Xml.XPath.XPathNavigator myXPathNavigator2 = myXPathNodeIterator.Current.Clone();//克隆当前接点
//     while(myXPathNavigator2.MoveToNextAttribute())//移动指针到下一个属性
//     {
//      li.Text = myXPathNavigator2.Value.ToString();//把属性值(title)添加到ListItem的“文本”属性
//     }
     myXPathNavigator2.MoveToNextAttribute();
     li.Text = myXPathNavigator2.Value.ToString();
     dd.Items.Add(li);
    }
    
   }
   catch{}
  }

}

其中关键的步骤加了注释,其它的大家可以到MSDN上去查找。

 

二。实现 (WebForm8.aspx.cs页面):

  protected System.Web.UI.WebControls.DropDownList DropDownList2;
  protected System.Web.UI.WebControls.DropDownList Dropdownlist1;

  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   string str = this.Request.QueryString["querychild"];
   if((str != null) && (str == "yes"))
   {
    string querystr = "//Pro_class[" + this.Request["parentid"] + "]/Pro_class_small/@id";
    string show = zlp.str.ReadXmlCS.QueryXml(@"D:/Inetpub/wwwroot/zlp/XmlData/ProductMenu.xml",querystr);
    this.Response.Write(show);
    this.Response.End();
   }

   if(!this.IsPostBack)
   {
    this.BindDropDownList();//加载页面时,填充第一个下拉列表框
   }
  }

  protected void BindDropDownList()
  {
   this.Dropdownlist1.Attributes.Add("onchange","javascript:XmlPost(this);"); //服务器端添加属性
   zlp.str.ReadXmlCS.QueryXml(@"D:/Inetpub/wwwroot/zlp/XmlData/ProductMenu.xml",@"//Pro_class/@id",this.Dropdownlist1);
  }

 

三:JS脚本(WebForm8.aspx页面)

不知道为什么,这里的JS脚本添加不进来,大家可以在事例下载中得到源码。

文章的结尾:

大家也可以把它添加到用户控件中或者是封装成自定义控件。

要是大家有更好的方法和建议,恳请通知我,欢迎指正,谢谢!

QQ:126083810

zlp8383178@163.com

事例演示:

http://j.thec.cn/zlp8383178/exmDropDownList/webform1.aspx

事例下载

Asp.net无刷新二级联动

Asp.net无刷新二级联动数据库建立表provinceid provinceName1 陕西3 山东8 河南表cityid cityname provinceid1 西安 12 济南 33 郑州 8...
  • wengman
  • wengman
  • 2009年04月20日 22:35
  • 2707

如何使用XMLHTTPRequest对象实现无刷新效果

一,创建XMLHttp对象: var xmlhttp;//声明浏览器初始化对象变量         function searchSuggest(){             try{    ...
  • huming558389
  • huming558389
  • 2016年05月15日 14:51
  • 203

html下拉框之间的联动------一级分类和二级分类

html/js代码如下: 湖北 广东 黄冈 武汉 function change() { var x = document.getElementBy...
  • stpeace
  • stpeace
  • 2016年02月26日 22:00
  • 18126

ASP.NET实现无刷新DropDownList联动

Example function load(state){ var drp2 = document.getElementById("DropDownList2"); for (i = ...
  • jxufewbt
  • jxufewbt
  • 2005年12月07日 09:40
  • 4041

UpdatePanel控件实现无刷新级联

.master代码如下:
  • yayun0516
  • yayun0516
  • 2014年12月11日 14:59
  • 1187

AJAX+ASP.NET无刷新二级联动省市下拉列表

TwoDropDownList.aspx 中的代码如下:asp:ScriptManager ID="ScriptManager1" runat="server">asp:ScriptManager>d...
  • zhangyj_315
  • zhangyj_315
  • 2008年05月27日 11:12
  • 3287

DropDownList无刷新ajax二级联动效果

页面主要代码:                                                                  Width="200" Aut...
  • zhaohongx
  • zhaohongx
  • 2015年02月15日 17:00
  • 1123

二级联动选择框

首先先写一个xml的配置文件,放置要读取的消息, 然后再联动页面通过js或者jquery来读取消息; 我的xml文件:              早(08:00-20:00...
  • TRQ809135642
  • TRQ809135642
  • 2017年05月26日 16:01
  • 445

JS实现无刷新联动菜单(select)的方法

所谓联动菜单,就是后一个下拉框的选项是根据前一个下拉框被选中的值来决定的,一个典型的应用就是省市联动菜单了,市的下拉选项是根据你选了哪个省来决定的,类似的需求我们经常遇到,相信许多新手都被这个问题困扰...
  • neubuffer
  • neubuffer
  • 2013年11月23日 14:30
  • 421

C# 二级下拉列表框联动(ComboBox)(ExecuteReader)

using System; using System.Collections.Generic; using System.ComponentModel; using System.Configurat...
  • houyanhua1
  • houyanhua1
  • 2017年12月13日 15:07
  • 49
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:另类无刷新、联动下拉列表框(二级+XMLHttpRequest)
举报原因:
原因补充:

(最多只允许输入30个字)