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); }
相关文章推荐
- YTU 1007: Redraiment猜想
- Php-5.3.29编译安装
- Xcode7 安装Alcatraz来管理所有的插件--安装方法
- Java中的集合学习笔记
- linux&window-命令行
- NSMutableString基础-初始化、赋值、替换、插入、删除、查找
- UIWebView Url拦截
- Android Wear创建一个通知
- JavaEE_ Spring__Spring中的事务 @Transactional 事务注释 (一)
- java 特殊开发包,jxab,xml,并发
- 关于spring与springMVC容器初始化的一些探讨
- Saltstack的pillar组件(6)
- centos6.7安装jira
- 为运行中的nginx添加模块
- PostgreSQL学习手册(客户端命令Ⅰ)
- Caffe学习系列(18): 绘制网络模型
- GPS模块更改输出信息 NEMA-0183协议
- Javascript实现图片的预加载功能
- Android 原生加载框
- 我的MYSQL学习心得(三) 查看字段长度