使用jQuery+HttpHandler+xml模拟一个三级联动的例子

2020-05-24 21:30:49易采站长站整理

}
}
return list;
}
/// <summary>
/// 根据省级编号和市级编号获取县级编号
/// </summary>
/// <param name=”provId”>省级编号</param>
/// <param name=”cityId”>市级编号</param>
private List<County> GetCountyListByCity(string provId, string cityId)
{
List<County> list = new List<County>();
if (doc != null)
{
XElement root = doc.Root;
string queryPath = “/area/province[@id='” + provId + “‘]/city[@id='” + cityId + “‘]/county”;
foreach (var county in root.XPathSelectElements(queryPath))
{
list.Add(new County()
{
Id = county.Attribute(“id”).Value,
Name = county.Attribute(“name”).Value
});
}
}
return list;
}
public bool IsReusable
{
get
{
return false;
}
}
}

在这里,查询xml我采用的是System.Xml.XPath命名空间下的XPathSelectElements(string xpath)方法和XPathSelectElement(string xpath)方法,在根据省级编号获取市级编号的方法里面,我使用了xpath表达式(假设传入的省级编号为1):/area/province[@id=’1′]/city,这个表达式以“/”开头,表示使用绝对路径,因为area为根节点所以从area开始,接着它下面有province元素,当我想获取area下所有province元素中id属性值为1的province元素时,我可以使用/area/province[@id=’1′],即在province后面加上[@id=’1′]这个条件,这时我就获取到了area下id属性为1的province元素了。接着我要获取该province元素下所有的city,那么只需在后面加上/city即可,所以最终的xpath表达式为:/area/province[@id=’1′]/city。
还有,因为此查询的xml是在当前网站的根目录,如果是在其它地方,那么在查询的时候要加上namespace
将从xml文件中读取到的值组装成对应的实体对象只后,我使用了System.Web.Script.Serialization命名空间下的JavaScriptSerializer类中的Serialize方法将得到的实体对象序列化成json数据返回给客户端。
第四步:编写html和js。

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>省市县三级联动下拉列表</title>
<script src=”Scripts/jquery-1.4.1.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function () {
$.post(“/Handler.ashx”, { “type”: “province” }, function (data, status) {
if (status == “success”) {
if (data != “failure”) {
data = $.parseJSON(data); //解析服务器返回的json数据
for (var i = 0; i < data.length; i++) {
var value = data[i].Id + “:” + data[i].Name; //设置option选项的值,格式为:”编号:名称”