頁面效果圖:javascript
數據庫表結構:html
首先在數據庫中建立省級、城市的表,個人表以下:我用了一張表放下了省級、城市的數據,用level劃分省份和城市,parentId表示該城市所在省份的idjava
主要文件有:index.cshtml,ErJLDController.cs ,數據處理層,業務處理層,還有數據庫文件 。數據庫
index.cshtml:json
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
ErJLDController.csapp
1 namespace Mvcproject.Controllers 2 { 3 //二級聯動 4 public class ErJLDController : Controller 5 { 6 7 ZjbEntities db = new ZjbEntities(); 8 // 9 // GET: /Test/ 10 11 public ActionResult Index() 12 { 13 //pro_city province=new pro_city(); 14 15 return View(); 16 } 17 18 public JsonResult getProvince() { 19 20 List<pro_city> provinceList = (from p in db.pro_city where p.level == 1 select p).ToList(); 21 22 23 JsonResult Jprovince = new JsonResult(); 24 Jprovince.Data = provinceList; 25 Jprovince.JsonRequestBehavior = JsonRequestBehavior.AllowGet; 26 return Jprovince; 27 28 } 29 30 public JsonResult getCity(string pName) 31 { 32 33 //string pid = (from p in db.pro_city where p.areaValue == pName select p.id).ToString(); 34 //int id = int.Parse(pid); 35 int id = int.Parse(pName); 36 37 List<pro_city> cityList = (from p in db.pro_city where p.parentId == id select p).ToList(); 38 39 JsonResult Jcity = new JsonResult(); 40 Jcity.Data = cityList; 41 Jcity.JsonRequestBehavior = JsonRequestBehavior.AllowGet; 42 return Jcity; 43 44 } 45 46 } 47 } 48 49 ErJLDController.cs