.net MVC 下拉多级联动及MVC Html.DropDownList 和DropDownListFor

第一种方式

前台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; }}

参考网址：https://www.cnblogs.com/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>

参考网址：https://blog.csdn.net/pt_sm/article/details/53893899

这个博客写的挺详细的

.net MVC 下拉多级联动及MVC Html.DropDownList 和DropDownListFor相关推荐

jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...
java 下拉多级联动头像裁剪调用摄像头 SpringMVC mybatis SSM
获取[下载地址] QQ 313596790 三大数据库 mysql oracle sqlsever 更专业.更强悍.适合不同用户群体 [新录针对本系统的视频教程,手把手教开发一个模块,快速 ...
WPS Excel多级下拉菜单联动去除子集中的空值
WPS Excel多级下拉菜单联动去除子集中的空值实现效果: 在图中可以看出四个省下面的城市数量并不相等.若是按照正常操作下来的结果如下图: 我们可以看到虽然城市不为空,但是会有空选项,这不是我们要 ...
Ext 下拉框联动第一次显示不正常的问题
做下拉框联动,异步加载数据,第一次显示时数据不准确,不要在combo_2的下拉框直接绑定store,在combo_1的改变事件里调用下面的方法 function GetAllCustomerBrand ...
html年月日下拉联动菜单年月日三下拉框联动
<html> <head> <title>年月日三下拉框联动</title> <meta http-equiv='Content-Type' co ...
js_jQuery【下拉菜单联动dom操作】
下拉菜单联动dom操作案例源码: <!DOCTYPE html> <html lang="en"><head><meta charset ...
swing下拉框从mysql_Java Swing应用程序 JComboBox下拉框联动查询
在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份: 市区: 县乡: 街道: 查询譬如说,你选择了省:江苏省,那么在市区中只会显示 ...
php jq ajax 4个下拉框联动案列,AJAX_AJAX实现下拉框联动，想当年，为了实现三级联动， - phpStudy...
AJAX实现下拉框联动想当年,为了实现三级联动,找个js高手些了N多代码才搞定,但是很慢,因为一次要将所有的选项取来,然后排序,查找动态显示. 现在使用AJAX真是太方便了,下面做了个简单例子,实现 ...
高级查询组件下拉框联动（三）
实现下拉框联动例子. 1.首先在ul中定义省份和城市查询条件. <ul id="dynamicCondition" style="display:none;&quo ...

.net MVC 下拉多级联动及MVC Html.DropDownList 和DropDownListFor

.net MVC 下拉多级联动及MVC Html.DropDownList 和DropDownListFor相关推荐

最新文章

热门文章