您的位置:首页 > 其它

MVC 二级联动 可以试试

2015-12-18 15:25 471 查看
后台代码,获取数据如下:

/// <summary>
2         /// 获取省份
3         /// </summary>
4         public JsonResult GetProvincelist()
5         {
6             return Json(db.Province.ToList(),JsonRequestBehavior.AllowGet);
7         }
8         /// <summary>
9         /// 获取城市
10         /// </summary>
11         /// <param name="pid"></param>
12         /// <returns></returns>
13         public JsonResult GetCitylist(int pid)
14         {
15             List<CityModel> list=db.City.Where(c => c.Province.PID == pid).ToList();
16             List<SelectListItem> item = new List<SelectListItem>();
17             foreach (var City in list)
18             {
19                 item.Add(new SelectListItem { Text = City.CityName, Value = City.CID.ToString() });
20             }
21             return Json(item, JsonRequestBehavior.AllowGet);
22         }


定义两个下拉框:

1 <span>省份:</span>
2 <select id="Province" >
3 <option>请选择</option>
4 </select>
5
6 <span>市:</span>
7 <select id="City">
8 <option>请选择</option>
9 </select>


使用jquery获取控制器里返回的值加载到下拉框中:

<script type="text/javascript">
2     $(function () {
3         GetProvince(); //加载省份
4         $("#Province").change(function () {
5             GetCity();
6         });
7     });
8     function GetProvince() {
9 //        $("#Province").empty();
10         $.getJSON(
11             "/Home/GetProvincelist",
12             function (data) {
13                 alert(data);
14                 $.each(data, function (i, item) {
15                     $("<option></option>").val(item["PID"]).text(item["ProvinceName"]).appendTo($("#Province"));
16                 })
17             });
18 //            GetCity();
19         }
20         function GetCity() {
21             $("#City").empty();
22             $.getJSON(
23             "/Home/GetCitylist",
24             { pid: $("#Province").val() },
25             function (data) {
26                 $.each(data, function (i, item) {
27                     $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#City"));
28
29                 })
30             });
31         }
32 </script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: