asp.net mvc jQuery 城市二级联动

页面效果图：

数据库表结构：

首先在数据库中创建省级、城市的表，我的表如下：我用了一张表放下了省级、城市的数据，用level划分省份和城市，parentId表示该城市所在省份的id

asp.net mvc jQuery 城市二级联动

主要文件有：index.cshtml，ErJLDController.cs ，数据处理层，业务处理层，还有数据库文件。

index.cshtml：

 1 <body>
 2     <div>
 3         <select id="provinceId" >
 4          <option> 请选择省份</option>
 5         </select>
 6         <select id="cityId">
 7             <option>请选择市区</option>
 8         </select>
 9     </div>
10 
11     <script type="text/javascript">
12     
13         
14 
15         //用json从数据库里取一级列表的参数
16         $(function () {
17 
18             $.getJSON("ErJLD/getProvince/", function (obj) {
19                 $.each(obj, function (i, p) {
20                     $("#provinceId").append("<option value='"+p.id+"'>" + p.areaValue + "</option>");
21                 });
22 
23                 $("#provinceId").change(function () {
24                     //用attr（）方法获取当前选择的option的value值（即p.id ,数据库里的id值，
25                     //虽然在TestController中的getCity方法中传入的是string类型的形参，但是后来需要变换成int类型, 所以value值应该为数字）
26                     var pName = $("#provinceId").attr("value");
27                     $.getJSON("ErJLD/getCity?pName=" + pName, getcity);
28                 });
29             });
30         });
31            
32       
33         
34 
35         function getcity(obj) {         
36             $("#cityId").empty();
37                         $.each(obj, function (m, v) {
38                             $("#cityId").append("<option >" + v.areaValue + "</option>");
39                         });
40        
41                     };
42                
43               
44             
45 
46     </script>
47 </body>
48 
49 Index.cshtml

View Code