无刷新三级联动(省，市，县)纯脚本

来源：互联网发布：sql自学容易上手吗编辑：程序博客网时间：2024/04/30 06:46

//第一级显示所有的省份

$(function () {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetListProvince",
Data: "{}",
success: function (result) {
var strDrop = '';
for (var i = 0; i < result.d.length; i++) {
strDrop += "<option value='" + result.d[i].provinceID + "' >" + result.d[i].provinceName + "</option>";
}
$('#Province').append(strDrop);
}

})

//在第二个select中显示根据第一个下拉查到的所有option

$('#Province').change(function () {
$('#City option:gt(0)').remove();
$('#Area option:gt(0)').remove();
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetListCity",
data: "{Id:'" + $(this).val() + "'}",
success: function (result) {
var strCity = '';
for (var i = 0; i < result.d.length; i++) {
strCity += "<option value='" + result.d[i].cityID + "' >" + result.d[i].cityName + "</option>";
}
$('#City').append(strCity);
}
})
})

//在第三个select中显示根据第二级查到的所有option

$('#City').change(function () {
$('#Area option:gt(0)').remove();
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetListArea",
data: "{Id:'" + $(this).val() + "'}",
success: function (result) {
var strArea = '';
for (var i = 0; i < result.d.length; i++) {
strArea += "<option value='" + result.d[i].areaID + "' >" + result.d[i].areaName + "</option>";
}
$('#Area').append(strArea);
}
})
})

})
</script>

//脚本生成select

</select>县

//后台处理

WebService

[WebMethod]
public List<Model.province> GetListProvince()
{
BLL.province bll_Province = new BLL.province();
List<Model.province> list = bll_Province.GetListModel();
return list;
}

[WebMethod]
public List<Model.city> GetListCity(string Id)
{
BLL.city bll_City = new BLL.city();
List<Model.city> list = bll_City.GetListCity("father='"+Id+"'");
return list;
}

[WebMethod]
public List<Model.area> GetListArea(string Id)
{
BLL.area bll_area = new BLL.area();
List<Model.area> list = bll_area.GetlistArea("father='" + Id + "'");
return list;
}