另类无刷新、联动下拉列表框(二级+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

事例下载

相关文章推荐

无刷新联动下拉列表框

  • 2008年06月28日 16:52
  • 22KB
  • 下载

用js写二级下拉列表框

选择省份 吉林省 辽宁省 山东省 选择城市 //定位省份下位框,同时添加内容改变事件 document.getElementById("provi...
  • boxyuan
  • boxyuan
  • 2017年05月23日 15:50
  • 223

在InfoPath Forms Services中实现联动下拉列表框(一)

MS Office InfoPath 2007是一整套创建收集和共享信息的动态表单工具,它可以创建功能丰富的动态表单,供团队和组织收集、共享、重复使用和管理信息。InfoPath Forms Serv...

下拉列表框的联动事件

  • 2012年07月30日 14:09
  • 17KB
  • 下载

javascript 更新联动下拉列表框

在界面中有3个下拉列表框需要联动。 选择不同的公司后,使用部门和管理部门的内容也要进行更新。 数据来自2张表。company和department。 思路: 控制器方法中将department...

省市联动——季度-月份下拉列表框——jQuery版

引入jQuery类库: jquery-1.6.1.js; 源代码: 省市联动 //当季度变化时,被选项月份也会做出相应的变化 function quarterSelect(){ ...

在InfoPath Forms Services中实现联动下拉列表框(二)

通过VSTA编程实现联动下拉列表框VSTA(Visual Studio Tools for Applications )是微软免费提供的方便开发人员定制应用程序的工具,它的作用和VBA类似,可以为应用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:另类无刷新、联动下拉列表框(二级+XMLHttpRequest)
举报原因:
原因补充:

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