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

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

$(“#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 id=”province” name=”province”>
</select>
<!–市–>
<select id=”city” name=”city”>
</select>
<!–县–>
<select id=”county” name=”county”>
</select>
<br />
<span id=”txtProvince” style=”color: #ff0000;”></span>- <span id=”txtCity” style=”color: #ff0000;”></span>- <span id=”txtCounty” style=”color: #ff0000;”></span>