首先要引用<script src="~/Scripts/knockout-2.2.0.js"></script>
<script>
$(function () {
Province();
City();
District();
});
function Province() {
viewModel = {
ProvinceCollection: ko.observableArray(),
CityCollection: ko.observableArray(),
DistrictCollection: ko.observableArray()
};
$.ajax({
type: "Post",
url: "/School/GetProvince",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response != "") {
$(response).each(function (index, element) {
viewModel.ProvinceCollection.push(element);
});
ko.applyBindings(viewModel);
$("#Province option[value='@ViewBag.Province']").attr("selected", true);
$("#Province").change();
}
}
});
}
function City() {
$("#Province").change(function () {
var ProvinceId = $("#Province").val().split(',')[0];
$.ajax({
type: "Post",
url: "/School/GetCity",
data: JSON.stringify({
ProvinceID: ProvinceId
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
viewModel.CityCollection.removeAll();
viewModel.DistrictCollection.removeAll();
if (response != "") {
$(response).each(function (index, element) {
viewModel.CityCollection.push(element);
});
ko.applyBindings(viewModel);
$("#City option[value='@ViewBag.City']").attr("selected", true);
$("#City").change();
}
}
});
});
}
function District() {
$("#City").change(function () {
var CityId = $("#City").val().split(',')[0];
var ProvinceId = $("#Province").val().split(',')[0];
$.ajax({
type: "Post",
url: "/School/GetDistrict",
data: JSON.stringify({
ProvinceID: ProvinceId,
CityID: CityId
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
viewModel.DistrictCollection.removeAll();
if (response != "") {
$(response).each(function (index, element) {
viewModel.DistrictCollection.push(element);
});
ko.applyBindings(viewModel);
$("#District option[value='@ViewBag.District']").attr("selected", true);
}
}
});
});
}
</script>
<div class="form-group">
<label class="col-sm-2 control-label">省份</label>
<div class="col-sm-2">
<select class="form-control " required="" data-bind="options: ProvinceCollection, optionsCaption: '请选择省份...',
optionsValue: function (item) { return item.Value; },
optionsText: function (item) { return item.Text; }, value: Province,
valueUpdate: 'change'" id="Province" ng-model="FormData.Province" name="Province"></select>
<input type="hidden" name="Province" />
</div>
<label class="col-sm-1 control-label">城市</label>
<div class="col-sm-2">
<select class="form-control " required="" data-bind="options: CityCollection, optionsCaption: '请选择城市...',
optionsValue: function (item) { return item.Value; },
optionsText: function (item) { return item.Text; }, value: City,
valueUpdate: 'change'" id="City" ng-model="FormData.City" name="City"></select>
<input type="hidden" name="City" />
</div>
<label class="col-sm-1 control-label">区县</label>
<div class="col-sm-2">
<select class="form-control " required="" data-bind="options: DistrictCollection, optionsCaption: '请选择区县...',
optionsValue: function (item) { return item.Value; },
optionsText: function (item) { return item.Text; }, value: District,
valueUpdate: 'change'" id="District" ng-model="FormData.District" name="District"></select>
<input type="hidden" name="District" />
</div>
</div>
//三级联动中的省份
[HttpPost]
public JsonResult GetProvince()
{
var province = AdministrativeCode.LstAdministrativeCode;
var lstitem2 = new List<SelectListItem>();
var Pli = new SelectListItem();
foreach (var item in province)
{
Pli = new SelectListItem();
Pli.Text = item.Caption;
Pli.Value = item.ID.ToString() + "," + item.Caption;
lstitem2.Add(Pli);
}
return Json(lstitem2);
}
//三级联动中的城市
[HttpPost]
public JsonResult GetCity(int ProvinceID)
{
var CityList = AdministrativeCode.LstAdministrativeCode.Where(o => o.ID == ProvinceID).ToEntity().SubAdministrativeCode;
var lstitem2 = new List<SelectListItem>();
var Pli = new SelectListItem();
foreach (var item in CityList)
{
Pli = new SelectListItem();
Pli.Text = item.Caption;
Pli.Value = item.ID.ToString() + "," + item.Caption;
lstitem2.Add(Pli);
}
return Json(lstitem2);
}
[HttpPost]
public JsonResult GetDistrict(int ProvinceID, int CityID)
{
var DistrictList = AdministrativeCode.LstAdministrativeCode.Where(o => o.ID ==ProvinceID).ToEntity().SubAdministrativeCode.Where(o=>o.ID==CityID).ToEntity().SubAdministrativeCode;
var lstitem2 = new List<SelectListItem>();
var Pli = new SelectListItem();
foreach (var item in DistrictList)
{
Pli = new SelectListItem();
Pli.Text = item.Caption;
Pli.Value = item.ID.ToString() + "," + item.Caption;
lstitem2.Add(Pli);
}
return Json(lstitem2);
}