效果图：
1、 
2、
3、
4、
简单实现效果，尚未优化，应该封装成一个方法。（一般不需要异步，直接前台全部加载完，这里由于个人需求才异步请求）
$('#City').change(function () {
var val = $("#Province option:selected").val();
if (val !== '') {
$.ajax({
url: "url。。。。" + val, //主要是网址
type: "Get",
contentType: "application/json",
dataType: "json",
success: function (data) {
var ddl = $("#Area");
ddl.empty(); //主要清空数据，再重新Append
var result = eval(data);
var opt = $("<option></option>").text('请选择市').val('');
ddl.append(opt);
//循环遍历 下拉框绑定
$(result).each(function (key) {
//添加option 对应Json对象名称
var opt = $("<option></option>").text(result[key].Name).val(result[key].ID);
ddl.append(opt);
});
},
error: function () {
alert("Error");
}
});
}
});
$('#Province').change(function () {
var val = $("#Province option:selected").val();
if (val !== '') {
$.ajax({
url: "url。。。。" + val,
type: "Get",
contentType: "application/json",
dataType: "json",
success: function (data) {
var ddl = $("#City");
$('#Area').empty(); //省变了，市区和县肯定跟着变，所以这里就清空两个
ddl.empty();
var result = eval(data);
var opt = $("<option></option>").text('请选择市').val('');
ddl.append(opt);
//循环遍历 下拉框绑定
$(result).each(function (key) {
//添加option 对应Json对象名称
var opt = $("<option></option>").text(result[key].Name).val(result[key].ID);
ddl.append(opt);
});
},
error: function () {
alert("Error");
}
});
}
});
$('#Country').change(function () {
var val = $("#Country option:selected").val();
$.ajax({
url: "url。。。。" + val,
type: "Get",
contentType: "application/json",
dataType: "json",
success: function (data) {
var ddl = $("#Province");
ddl.empty();
$('#City').empty();
$('#Area').empty();
var result = eval(data);
var opt = $("<option></option>").text('请选择省').val('');
ddl.append(opt);
//循环遍历 下拉框绑定
$(result).each(function (key) {
//添加option 对应Json对象名称
var opt = $("<option></option>").text(result[key].Name).val(result[key].ID);
ddl.append(opt);
});
},
error: function () {
alert("Error");
}
});
});
})