第一种方式
前台html
<div style="margin:50px 0"><span>省份：</span><select id="Province"><option>请选择</option></select><span>市：</span><select id="City"><option>请选择</option></select></div>
jquery
<script src="~/Scripts/jquery-1.10.2.min.js"></script><script type="text/javascript">$(function () {GetProvince(); //加载省份$("#Province").change(function () {GetCity();});});function GetProvince() {$.getJSON("/Home/GetProvincelist",function (data) {$.each(data, function (i, item) {$("<option></option>").val(item["PID"]).text(item["ProvinceName"]).appendTo($("#Province"));})});}function GetCity() {$("#City").empty();$.getJSON("/Home/GetCitylist",{ pid: $("#Province").val() } ,function (data) {$.each(data, function (i, item) {$("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#City"));})});}</script>
后台代码
/// <summary>/// 模拟省份数据/// </summary>/// <returns></returns>public List<Province> Provincelist(){List<Province> list = new List<Province>();list.Add(new Province() { PID = 1, ProvinceName = "广东" });list.Add(new Province() { PID = 2, ProvinceName = "北京" });list.Add(new Province() { PID = 3, ProvinceName = "上海" });list.Add(new Province() { PID = 4, ProvinceName = "河北" });list.Add(new Province() { PID = 5, ProvinceName = "贵州" });list.Add(new Province() { PID = 6, ProvinceName = "云南" });return list;}/// <summary>/// 模拟城市数据/// </summary>/// <returns></returns>public List<City> Citylist(){List<City> cityList = new List<City>();cityList.Add(new City() { CID = 1, PID = 1, CityName = "广州" });cityList.Add(new City() { CID = 2, PID = 1, CityName = "深圳" });cityList.Add(new City() { CID = 3, PID = 1, CityName = "惠州" });cityList.Add(new City() { CID = 4, PID = 1, CityName = "湛江" });cityList.Add(new City() { CID = 5, PID = 2, CityName = "北京" });cityList.Add(new City() { CID = 6, PID = 3, CityName = "上海" });cityList.Add(new City() { CID = 7, PID = 4, CityName = "唐山市" });cityList.Add(new City() { CID = 8, PID = 4, CityName = "保定市" });cityList.Add(new City() { CID = 9, PID = 4, CityName = "张家口市" });return cityList;}/// <summary>/// 获取省份/// </summary>public JsonResult GetProvincelist(){var list = Provincelist();return Json(list, JsonRequestBehavior.AllowGet);}/// <summary>/// 获取城市/// </summary>/// <param name="pid"></param>/// <returns></returns>[WithoutLocalization]public JsonResult GetCitylist(int pid){var citys = Citylist().Where(m => m.PID == pid).ToList();List<SelectListItem> item = new List<SelectListItem>();foreach (var City in citys){item.Add(new SelectListItem { Text = City.CityName, Value = City.CID.ToString() });}return Json(item, JsonRequestBehavior.AllowGet);}
第二种方式
前台html
model需要在该页面首行添加类的引用，@model WebApplicationShare.Controllers.ProvinceViewModel
<div style="margin:50px 0"><span>省份：</span>@Html.DropDownListFor(model => model.PID,ViewBag.ProvinceList as IEnumerable<SelectListItem>, "＝请选择＝", new { @class = "form-control", id = "Province" })<span>市：</span>@Html.DropDownListFor(model => model.CID, ViewBag.CityList as IEnumerable<SelectListItem>, "＝请选择＝", new { @class = "form-control", id = "City" })</div>
jquery代码（和上面的那个几乎一样，区别在于初始化的时候不加载省份，而是加载城市）
$(function () {//GetProvince(); //加载省份GetCity();$("#Province").change(function () {GetCity();});});function GetProvince() {// $("#Province").empty();$.getJSON("/Home/GetProvincelist",function (data) {$.each(data, function (i, item) {$("<option></option>").val(item["PID"]).text(item["ProvinceName"]).appendTo($("#Province"));})});// GetCity();}function GetCity() {$("#City").empty();$.getJSON("/Home/GetCitylist",{ pid: $("#Province").val() } ,function (data) {$.each(data, function (i, item) {$("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#City"));})});}
后台代码
public ActionResult Index(){ViewBag.ProvinceList = Provincelist().Select(m => new SelectListItem(){Text = m.ProvinceName,Value = m.PID.ToString(),Selected = (m.PID == 4) //测试，默认让它绑定第四个}).ToList();ViewBag.CityList = Citylist().Select(m => new SelectListItem(){Text = m.CityName,Value = m.CID.ToString(),Selected = (m.CID == 9) //测试发现这个设置了没啥用}).ToList();return View();}public class ProvinceViewModel{/// <summary>/// 省份ID/// </summary>public int PID { get; set; }/// <summary>/// 城市ID/// </summary>public int CID { get; set; }}
参考网址：/jys509/p/4554688.html#autoid-0-0-0
不理解原博主说的编辑是什么意思，我自己试了之后只能实现级联，而且还有一些小bug，比如省份如果选择请选择，城市那边获取不到省份的pid导致F12输出中报错
DropDownList用法
后台代码
public SelectList CardTypeSelectList(int? value){List<dic_docmenttype> dic_dtList = CardTypeService.LoadEntities(c => c.VALID == 1).ToList();dic_dtList.Insert(0, new dic_docmenttype { CODE = 0, DVALUE = "请选择" });return new SelectList(dic_dtList, "CODE", "DVALUE", value);}public ActionResult Index(){int CardValue = 0;ViewData["RY_cardType"] = CardTypeSelectList(CardValue);return View();}
前台html
<div class="form-group"><label class="control-label col-sm-4"><span style="color: red;">* </span>证件类型</label><div class="col-sm-8">@Html.DropDownList("RY_cardType", null, new { @class = "form-control allCardType" })</div></div>
参考网址：/pt_sm/article/details/53893899
这个博客写的挺详细的
