代码改变世界

MVC 二级联动

  yuxianghappy  阅读(2565)  评论(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>
复制代码

 

编辑推荐:
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
点击右上角即可分享
微信分享提示