前言
因为省市联动的需求在每个项目几乎存在，所以本人也对此在web页面通过封装比较简洁的JQ方法循环判断调用调用后台获取数据再绑定到Select表单上。如果对代码有什么疑问或者更好办法可以在评论区留言。
HTML代码
<select id="Province" name="Province">
<option selected="selected">--请选择--</option>
</select>
<select id="City" name="City">
<option selected="selected">--请选择--</option>
</select>
<select id="Distinct" name="Distinct">
<option selected="selected">--请选择--</option>
</select>
JQ代码
//省市联动
getAreaInfo("Province", 1, "中国");
//点击选择按钮改变触发事件
$("#Province").change(function () {
if ($("#Province option:selected").text() != "--请选择--") {
getAreaInfo("City", 2, $("#Province option:selected").text());
}
});
$("#City").change(function () {
if ($("#City option:selected").text() != "--请选择--") {
getAreaInfo("Distinct", 3, $("#City option:selected").text());
}
});
//绑定省市联动
function getAreaInfo(id, LevelID, PreName) {
$.getJSON("/User/UserAreaSelect", { "LevelID": LevelID, "PreName": PreName }, function (data) {
if (data != null) {
var str = '<option>--请选择--</option>';
for (var i = 0; i < data.length; i++) {
str += '<option value="' + data[i].AreaCode + '">' + data[i].AreaName + '</option>';
}
$("#"+id).html(str);
}
})
}