地区选择操作在WEB应用中比较常见的操作，本文在.net mvc3下实现了省市县三级联动选择功能。
本文博客出处：http://www.kwstu.com/ArticleView/admin_201392171455268 转载请注明！
一、效果图：
二、页面代码
<script src="../../Content/Js/selectlist.js"></script>
<script src="../../Content/Js/systools.js"></script>
@Html.DropDownListFor(model => model.PROVINCEID, Kzrcw2013.Models.ProvinceViewModel.GetProvinceSelectList())
@Html.DropDownListFor(model => model.CITYID, Kzrcw2013.Models.CityViewModel.GetCitySelectList(""))
@Html.DropDownListFor(model => model.DISTRICTID, Kzrcw2013.Models.DistrictViewModel.GetDistrictSelectList(""))
以上参数15为数据库中省份ID，主要作用给省份选择框一个默认省份，142参数同意。
三、JS代码
1、JS调用代码
$("#PROVINCEID").change(function () { GetCity($(this).val(), "CITYID", "DISTRICTID", "/SysTools/GetCityList"); });
$("#CITYID").change(function () { GetArea($(this).val(), "/SysTools/GetDistrictList", "DISTRICTID"); });
联动操作触发事件。
2、JS执行代码
//省市县联动下拉列表选择共用方法
function GetCity(message, tmp6, tmp7, tmp8) {
city = tmp6;
area = tmp7;
url4 = tmp8;
$("#" + city).html(""); //清空市区SELECT控件
$("#" + area).html("");
$("#" + city).append("<option value='0' selected='selected'></option>");
$("#" + area).append("<option value='0' selected='selected'></option>");
//设置异步传输参数
var option = {
url: url4,
type: 'Get',
chche: false,
dataType: 'json',
data: { Message: message }, //发送服务器数据
success: function (data) { //成功事件
$("#" + city).empty();
$.each(data, function (i, item) {
$("<option></option>")
.val(data[i].Value)
.text(data[i].Text)
.appendTo($("#" + city));
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) { //发送失败事件
alert(textStatus);
}
};
//进行异步传输
$.ajax(option);
}
function GetArea(message, tmp9, tmp7) {
area = tmp7;
url5 = tmp9;
$("#" + area).html(""); //清空市区SELECT控件
$("#" + area).append("<option value='0' selected='selected'></option>");
//设置异步传输参数
var option = {
url: url5,
type: 'Get',
chche: false,
dataType: 'json',
data: { Message: message }, //发送服务器数据
success: function (data) { //成功事件
$("#" + area).empty();
$.each(data, function (i, item) {
$("<option></option>")
.val(data[i].Value)
.text(data[i].Text)
.appendTo($("#" + area));
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) { //发送失败事件
alert(textStatus);
}
};
//进行异步传输
$.ajax(option);
}
四、后台代码
页面初始化后台代码：
/***********获取省份列表****************/
/** 使用方法：@Html.DropDownListFor(model => model.SOURCE, KwstuBlogs.Models.TemplateViewModel.GetSelectList())*/
public static class ProvinceViewModel
{
public static IEnumerable<SelectListItem> GetProvinceSelectList()
{
KzrcwDbContent db = new KzrcwDbContent();
var selectList = db.STANDARD_PROVINCE.Select(a => new SelectListItem
{
Text = a.NAME,
Value = a.ID
});
return selectList;
}
}
/***********获取城市模版列表****************/
/** 使用方法：@Html.DropDownListFor(model => model.SOURCE, KwstuBlogs.Models.TemplateViewModel.GetSelectList())*/
public static class CityViewModel
{
public static IEnumerable<SelectListItem> GetCitySelectList(string sort)
{
KzrcwDbContent db = new KzrcwDbContent();
var selectList = db.STANDARD_CITY.Where(a => a.PROVINCE_ID == sort).Select(a => new SelectListItem
{
Text = a.CITY_NAME,
Value = a.ID
});
return selectList;
}
} /***********获取县区模版列表****************/
/** 使用方法：@Html.DropDownListFor(model => model.SOURCE, KwstuBlogs.Models.TemplateViewModel.GetSelectList())*/
public static class DistrictViewModel
{
public static IEnumerable<SelectListItem> GetDistrictSelectList(string sort)
{
KzrcwDbContent db = new KzrcwDbContent();
var selectList = db.STANDARD_DISTRICT.Where(a => a.CITY_ID == sort).Select(a => new SelectListItem
{
Text = a.DISTRICT_NAME,
Value = a.ID
});
return selectList;
}
}
联动选择后台代码
// 获取某［省份］的所有［城市］数据
public ActionResult GetCityList(string message)
{
List<STANDARD_CITY> list = db.Database.SqlQuery<STANDARD_CITY>("Select ID,CITY_NAME,PROVINCE_ID,DISTRICT_NUM from TS.STANDARD_CITY where PROVINCE_ID='" + message + "'").ToList();
SelectList pList = new SelectList(list, "ID", "CITY_NAME");
return Json(pList, JsonRequestBehavior.AllowGet);
}
// 获取某［城市］的所有［县区］数据
public ActionResult GetDistrictList(string message)
{
List<STANDARD_DISTRICT> list = db.Database.SqlQuery<STANDARD_DISTRICT>("Select ID,DISTRICT_NAME,CITY_ID from TS.STANDARD_DISTRICT where CITY_ID='" + message + "'").ToList();
SelectList pList = new SelectList(list, "ID", "DISTRICT_NAME");
return Json(pList, JsonRequestBehavior.AllowGet);
}