MVC 二级联动
2012-08-30 16:56 yuxianghappy 阅读(2566) 评论(3) 编辑 收藏 举报后台代码,获取数据如下:

1 /// <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获取控制器里返回的值加载到下拉框中:

1 <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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律