博 之 文

以 拼 搏 设 计 梦 想 , 以 恒 心 编 程 明 天
  首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Mvc DropDownList联动

Posted on 2014-03-18 19:36  IsNull_Soft  阅读(178)  评论(0)    收藏  举报

后台代码

/// <summary>
        /// 获取省份
        /// </summary>
        public JsonResult GetProvincelist()
        {
            return Json(db.Province.ToList(),JsonRequestBehavior.AllowGet);
        }
        /// <summary>
        /// 获取城市
        /// </summary>
        /// <param name="pid"></param>
        /// <returns></returns>
        public JsonResult GetCitylist(int pid)
        {
            List<CityModel> list=db.City.Where(c => c.Province.PID == pid).ToList();
            List<SelectListItem> item = new List<SelectListItem>();
            foreach (var City in list)
            {
                item.Add(new SelectListItem { Text = City.CityName, Value = City.CID.ToString() });
            }
            return Json(item, JsonRequestBehavior.AllowGet);
        }

View

<span>省份:</span>
<select id="Province" >
<option>请选择</option>
</select>

<span>市:</span>
<select id="City">
<option>请选择</option>
</select>

JS代码

<script type="text/javascript">
    $(function () {
        GetProvince(); //加载省份
        $("#Province").change(function () {
            GetCity();
        });
    });
    function GetProvince() {
//        $("#Province").empty();
        $.getJSON(
            "/Home/GetProvincelist",
            function (data) {
                alert(data);
                $.each(data, function (i, item) {
                    $("<option></option>").val(item["PID"]).text(item["ProvinceName"]).appendTo($("#Province"));
                })
            });
//            GetCity();
        }
        function GetCity() {
            $("#City").empty();
            $.getJSON(
            "/Home/GetCitylist",
            { pid: $("#Province").val() },
            function (data) {
                $.each(data, function (i, item) {
                    $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#City"));
                    
                })
            });
        }
</script>