基於MVC3方式實作下拉列表連動(JQuery)

上次專案中遇到一個需要多個下拉清單連動的操作，今天有空將實作方式整理以便日後參考。
要達到的效果是，點選一個下拉框，則另一個下拉框的值會發生對應變化。如：選擇中國，則另一個一下拉框裡顯示中國各省。
傳統的HTML方式較簡單，實際上基於MVC的實作方式也大同小異。

直接上碼：

複製程式碼程式碼如下:

 程式碼如下:
 
 DP_Provice 
{ 
public int proviceID { get; set; } 
public string ProviceName { get; set; } 
public int ProviceNode { get; set; } 
public virtual List} 

public class DP_City 
{ 
public int CityNode { get; set; } 
public string CityName { get; set; } 
public string ProviceNode { get; set; } 

}

對以上涉及的實體類別予以賦值，暫時使用一個靜態類別初始化簡單資料：複製程式碼

 程式碼如下:

 
public static class DPDataSource 
{ 
public static List 
{ 
List source = new List 
{ 
new DP_Provice{ ProviceNode=1, ProviceName="北京", citySource=new List{ 
new DP_City{ 
CityNode=11, CityName="北京海淀" 
}, 
new DP_City{ 
CityNode=12,CityName="北京西城" 
} 
}}, 
new DP_Provice{ ProviceNode=2, ProviceName="山東", citySource=new List{ 
new DP_City{ 
CityNode=21, CityName="濟南" 
}, 
CityNode=21, CityName="濟南" 
}, 
}, 
new DP_City{ 
CityNode=22,CityName="德州" 
} 
}}, 
new DP_Provice{ ProviceNode=3, ProviceName="河北", citySource=new List{ 
new DP_City{ 
CityNode=31, CityName="石家莊" 
}, 
new DP_City{ 
CityNode=32,CityName="衡水" 
} 
}} 
} 

} >};

return source;

} } 具體在Controller中的調用，因為使用的JQuery中的AJAX方式，所以返回的結果類型為Json;

複製程式碼


 程式碼如下:

 
 
return View("DPShow"); 
} 
List source = DPDataSource.InitalData(); 

public JsonResult GetProvinceSource() 
{ 
public JsonResult GetProvinceSource() 
{ 
if>if source == null || source.Count { 
source = DPDataSource.InitalData(); 
} 
return Json(source, JsonRequestBehavior.AllowGet)； >public JsonResult GetCitySource(string proviceName) 
{ 
source = DPDataSource.InitalData(); 

List citySource = new List();
Source => a.ProviceNode.ToString().Contains(proviceName)).First().citySource;
return Json(citySource, JsonRequestBehavior.AllowGet);

} }

複製程式碼程式碼如下:

@model MvcApplication.Models.DP_Provice
@{
ViewBag.Title = "DPShow";
Layout = "~/Views/Shared/_Layout.cshtml";

作者最新文章