您的位置:首页 > 其它

knockout 省、市、区三级联动

2016-01-07 10:53 337 查看
首先要引用<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);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: