代码改变世界

MVC 二级联动

  yuxianghappy  阅读(2566)  评论(3编辑  收藏  举报

后台代码,获取数据如下:

复制代码
View Code
 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         }
复制代码


定义两个下拉框:

复制代码
View Code
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获取控制器里返回的值加载到下拉框中:

复制代码
View Code
 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与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示