第一种方式
前台html
省份:
市:
jquery
后台代码
///
/// 模拟省份数据
///
///
public List Provincelist()
{
List list = new List();
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;
}
///
/// 模拟城市数据
///
///
public List Citylist()
{
List cityList = new List();
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;
}
///
/// 获取省份
///
public JsonResult GetProvincelist()
{
var list = Provincelist();
return Json(list, JsonRequestBehavior.AllowGet);
}
///
/// 获取城市
///
///
///
[WithoutLocalization]
public JsonResult GetCitylist(int pid)
{
var citys = Citylist().Where(m => m.PID == pid).ToList();
List item = new List();
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
省份:
@Html.DropDownListFor(model => model.PID,ViewBag.ProvinceList as IEnumerable, "=请选择=", new { @class = "form-control", id = "Province" })
市:
@Html.DropDownListFor(model => model.CID, ViewBag.CityList as IEnumerable, "=请选择=", new { @class = "form-control", id = "City" })
jquery代码(和上面的那个几乎一样,区别在于初始化的时候不加载省份,而是加载城市)
$(function () {
//GetProvince(); //加载省份
GetCity();
$("#Province").change(function () {
GetCity();
});
});
function GetProvince() {
// $("#Province").empty();
$.getJSON(
"/Home/GetProvincelist",
function (data) {
$.each(data, function (i, item) {
$("").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) {
$("").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
{
///
/// 省份ID
///
public int PID { get; set; }
///
/// 城市ID
///
public int CID { get; set; }
}
参考网址:https://www.cnblogs.com/jys509/p/4554688.html#autoid-0-0-0
不理解原博主说的编辑是什么意思,我自己试了之后只能实现级联,而且还有一些小bug,比如省份如果选择请选择,城市那边获取不到省份的pid导致F12输出中报错
DropDownList用法
后台代码
public SelectList CardTypeSelectList(int? value)
{
List 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
@Html.DropDownList("RY_cardType", null, new { @class = "form-control allCardType" })
参考网址:https://blog.csdn.net/pt_sm/article/details/53893899
这个博客写的挺详细的