<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>省市县三级联动下拉列表</title>
<script src="https://www.jb51.net/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选项的值，格式为："编号:名称"
$("#province").append("<option value='" + value + "'>" + data[i].Name + "</option>");
}
}
}
}, "text");
$("#province").change(function () {
var selectValue = $(this).val(); //获取选择的省级option的值
var provId = selectValue.split(':')[0]; //取出编号
var provTxt = selectValue.split(':')[1]; //取出名称
$("#txtProvince").html(provTxt); //显示选择的省的名称
$("#city").html("<option>==请选择市==</option>"); //当省级改变时将市级清空
$("#county").html("<option>==请选择县==</option>"); //当省级改变时将县级清空
$.post("/Handler.ashx", { "province": provId, "type": "city" }, function (data, status) {
if (status == "success") {
if (data != "failure") {
data = $.parseJSON(data);
for (var i = 0; i < data.length; i++) {
var value = data[i].Id + ":" + data[i].Name;
$("#city").append("<option value='" + value + "'>" + data[i].Name + "</option>");
}
}
}
}, "text");
});
$("#city").change(function () {
var provId = $("#province").val().split(':')[0];
var selectValue = $(this).val(); //同上
var cityId = selectValue.split(':')[0]; //同上
var cityTxt = selectValue.split(':')[1]; //同上
$("#txtCity").html(cityTxt); //显示选择的市的名称
$("#county").html("<option>==请选择县==</option>"); //同上
$.post("/Handler.ashx", { "province": provId, "city": cityId, "type": "county" }, function (data, status) {
if (status == "success") {
if (data != "failure") {
data = $.parseJSON(data);
for (var i = 0; i < data.length; i++) {
var value = data[i].Id + ":" + data[i].Name;
$("#county").append("<option value='" + value + "'>" + data[i].Name + "</option>");
}
}
}
}, "text");
});
$("#county").change(function () {
$("#txtCounty").html($(this).val().split(':')[1]); //显示选择的县的名称
});
});
</script>
</head>
<body>
<!--省-->
<select>
</select>
<!--市-->
<select>
</select>
<!--县-->
<select>
</select>
<br />
<span></span>- <span></span>- <span></span>
</body>
</html>
关于使用jQuery与服务器通信，我使用的是$.post方法，该方法的具体使用可以参考jQuery官方文档，这里我想说的是，遍历后通过对象.属性访问时，这个属性的名字是区分大小写的，这个名字是服务器端定义的名字，因为服务器序列化的是服务器端的实体对象。
在这个例子中，关键点就是如何使用XPath表达式，如何调用System.Xml.XPath命名空间下的XPathSelectElements(string xpath)方法。
最终结果如下图：
代码13，31，50行可以优化。
不建议多次修改DOM结构，可以拼接字符串后一次append
数据源是xml，我会用xslt来解析xml直接输出<option>，这样就不用再前台拼接字符串了。要求所有节点ID不能有相同。
复制代码 代码如下: