knockout.js 省、市、區三級聯動

首先要引用<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);
        }