通用的下拉联动封装(级联)
前言
平时工作中下拉联动是相对比较麻烦的地方，虽然逻辑简单，但是需要写一堆js跟ajax请求。现在打算在.net core mvc下封装一个下拉联动组件方便使用。
下面将实现一个 国家 语言 省市区 的多级联动
创建实体模型
1 public class UserModel
2 {
3 /// <summary>
4 /// 用户名
5 /// </summary>
6 public string UserName { get; set; }
7
8
9 /// <summary>
10 /// 国家
11 /// </summary>
12 public int CountryId { get; set; }
13
14 /// <summary>
15 /// 语言
16 /// </summary>
17 public int LanguageId { get; set; }
18
19 /// <summary>
20 ///省
21 /// </summary>
22 public int PronviceId { get; set; }
23
24 /// <summary>
25 /// 市
26 /// </summary>
27 public int CityId { get; set; }
28
29 /// <summary>
30 /// 区
31 /// </summary>
32 public int GetDistrictId { get; set; }
33
34 }
35
36 public class Area
37 {
38 public int Id { get; set; }
39
40 public string Name { get; set; }
41
42 public int? ParentId { get; set; }
43 }
44
45 public class Language
46 {
47 public int Id { get; set; }
48
49 public int CountryId { get; set; }
50
51 public string Name { get; set; }
52 }
写出对应下拉的Action方法
这里 下拉contorler名称约定为DropdownListController,Action名称约定为 Get +字段名的方式,参数名称约定使用 父级字段的名称。这样在前台页面就不用指定获取数据源的url了
1 public class DropdownListController : Controller 2 { 3 private List<Area> areas; 4 5 private List<Language> languages; 6 7 public DropdownListController() 8 { 9 areas = new List<Area> 10 { 11 new Area { Id = 1, Name = "中国", ParentId = null }, 12 new Area { Id = 2, Name = "美国", ParentId = null }, 13 new Area { Id = 3, Name = "江苏省", ParentId = 1 }, 14 new Area { Id = 4, Name = "浙江省", ParentId = 1 }, 15 new Area { Id = 5, Name = "纽约州", ParentId = 2 }, 16 new Area { Id = 6, Name = "南京市", ParentId = 3 }, 17 new Area { Id = 7, Name = "杭州市", ParentId = 4 }, 18 new Area { Id = 8, Name = "纽约市", ParentId = 5 }, 19 new Area { Id = 9, Name = "曼哈顿区", ParentId = 8 }, 20 new Area { Id = 10, Name = "老庙区", ParentId = 6 }, 21 new Area { Id = 11, Name = "西湖区", ParentId = 7 } 22 }; 23 24 languages = new List<Language> 25 { 26 new Language{ Id=1,CountryId=1, Name="简体中文" }, 27 new Language{ Id=2,CountryId=2, Name="美式英语"}, 28 }; 29 } 30 31 public IActionResult GetCountryId() 32 { 33 return Json(areas.FindAll(x => x.ParentId == null).Select(x => new { value = x.Id, text = x.Name })); 34 } 35 36 public IActionResult GetLanguageId(int countryId) 37 { 38 return Json(languages.FindAll(x => x.CountryId == countryId).Select(x => new { value = x.Id, text = x.Name })); 39 } 40 41 public IActionResult GetPronviceId(int countryId) 42 { 43 return Json(areas.FindAll(x => x.ParentId == countryId).Select(x => new { value = x.Id, text = x.Name })); 44 } 45 46 public IActionResult GetCityId(int pronviceId) 47 { 48 return Json(areas.FindAll(x => x.ParentId == pronviceId).Select(x => new { value = x.Id, text = x.Name })); 49 } 50 51 public IActionResult GetDistrictId(int cityId) 52 { 53 return Json(areas.FindAll(x => x.ParentId == cityId).Select(x => new { value = x.Id, text = x.Name })); 54 } 55 }
前台Html
引用了 bootstrap, jquery
@model UserModel <a asp-action="Edit" class="btn btn-success m-b-15">去编辑页</a> <div class="form-inline row"> <div class="form-group "> <label>国家</label> <select asp-for="CountryId" class="form-control" asp-items="ViewBag.CountryList" data-select-childids="LanguageId,PronviceId"> <option value="">请选择</option> </select> </div> <div class="form-group "> <label>语言</label> <select asp-for="LanguageId" class="form-control"> <option value="">请选择</option> </select> </div> <div class="form-group"> <label>省</label> <select asp-for="PronviceId" class="form-control" data-select-childids="CityId"> <option value="">请选择</option> </select> </div> <div class="form-group"> <label>市</label> <select asp-for="CityId" class="form-control" data-select-childids="DistrictId"> <option value="">请选择</option> </select> </div> <div class="form-group"> <label>区</label> <select asp-for="DistrictId" class="form-control"> <option value="">请选择</option> </select> </div> </div>
下拉联动的js,基于 jquery
$(function () { //下拉联动初始化 $('select[data-select-childids]').each(function () { getChildSelect($(this).attr("id"), true); }); //下拉联动 data-select-childids 填写联动的Id,data-select-url 数据请求路径,data-select-paramids 追加的参数,data-select-value 当前值 $('select[data-select-childids]').change(function (e) { getChildSelect($(this).attr("id")); }); //清空下拉联动子选择项 function getChildSelect(selectid, isInit) { var select = $('#' + selectid); var selectchildIds = select.data('select-childids'); if (!selectchildIds) return; var childIds = selectchildIds.split(',') for (var i = 0; i < childIds.length; i++) { if (!childIds[i]) continue; var child = $('#' + childIds[i]); var childValue = child.val(); if (!childValue) childValue = child.data("select-value"); child.empty(); //默认值设定 var hasdefault = child.data("select-hasdefault"); if (hasdefault != "false") { child.append('<option value="">请选择</option>'); } //父级下拉有值时，ajax获取数据 if (select.val()) {var url = child.data('select-url') ? child.data('select-url') : '/DropdownList/Get' + child.attr("id");//url默认值 var verb = child.data('verb') ? child.data('verb') : 'GET';//请求的方法 var paramObj = {};//追加参数 getParentSelectParam(selectid, paramObj) //追加控制参数 var paramids = child.data('select-paramids'); if (paramids) { var paramidsArr = paramids.split(',') for (var k = 0; k < paramidsArr.length; k++) { paramObj[paramidsArr[k]] = $('#' + paramidsArr[k]).val(); } } $.ajax({ type: verb, url: url, data: paramObj, async: false, contentype: "application/x-www-form-urlencoded; charset=UTF-8", success: function (data) { if (data) { for (var j = 0; j < data.length; j++) { var selected = data[j].value == childValue ? 'selected = "selected"' : ''; child.append('<option value="' + data[j].value + '" ' + selected + '>' + data[j].text + '</option>'); } } } }); } //子级下拉如果还有下级,非初始化的时候 递归 if (!isInit && child.data('select-childids')) getChildSelect(child.attr("id")); } } //递归获取父级选中的值 param追加的url参数 function getParentSelectParam(selectid, param) { var select = $("#" + selectid); param[selectid] = $(select).val(); $('select[data-select-childids]').each(function () { var id = $(this).attr("id"); if (selectid != id) { var childids = $(this).data('select-childids'); if (childids) { childidsArr = childids.split(','); for (var i = 0; i < childidsArr.length; i++) { if (childidsArr[i] == selectid) { getParentSelectParam(id, param);//继续向父级查找 } } } } }); } });
后台 action
public class HomeController : Controller { private List<Area> areas; public HomeController() { areas = new List<Area> { new Area { Id = 1, Name = "中国", ParentId = null }, new Area { Id = 2, Name = "美国", ParentId = null }, new Area { Id = 3, Name = "江苏省", ParentId = 1 }, new Area { Id = 4, Name = "浙江省", ParentId = 1 }, new Area { Id = 5, Name = "纽约州", ParentId = 2 }, new Area { Id = 6, Name = "南京市", ParentId = 3 }, new Area { Id = 7, Name = "杭州市", ParentId = 4 }, new Area { Id = 8, Name = "纽约市", ParentId = 5 }, new Area { Id = 9, Name = "曼哈顿区", ParentId = 8 }, new Area { Id = 10, Name = "老庙区", ParentId = 6 }, new Area { Id = 11, Name = "西湖区", ParentId = 7 } }; } public IActionResult Index() { ViewBag.CountryList = areas.FindAll(x => x.ParentId == null).Select(x => new SelectListItem { Value = x.Id.ToString(), Text = x.Name }); return View(new UserModel()); } public IActionResult Edit() { ViewBag.CountryList = areas.FindAll(x => x.ParentId == null).Select(x => new SelectListItem { Value = x.Id.ToString(), Text = x.Name }); return View(new UserModel() { CountryId = 2, PronviceId = 5, CityId=8,DistrictId = 9, LanguageId = 2 }); } }
运行效果
用法说明
<a asp-action="Index" class="btn btn-success m-b-15">返回</a> <br /><br /> <div class="form-inline row"> <div class="form-group "> <label>国家</label> <select asp-for="CountryId" class="form-control selectList" asp-items="ViewBag.CountryList" data-select-childids="LanguageId,PronviceId"> <option value="">请选择</option> </select> </div> <div class="form-group "> <label>语言</label> <select asp-for="LanguageId" class="form-control" data-select-value="@Model.LanguageId" data-select-url="/DropDownList/GetLanguageId?id=1" data-select-paramids="CountryId" data-select-hasdefault="false" data-verb="Get" 请求的方式 > <option value="">请选择</option> </select> </div> <div class="form-group"> <label>省</label> <select asp-for="PronviceId" class="form-control" data-select-childids="CityId" data-select-value="@Model.PronviceId" data-select-url="/DropDownList/GetPronviceId?id=1" data-select-paramids="CountryId" > <option value="">请选择</option> </select> </div> <div class="form-group"> <label>市</label> <select asp-for="CityId" class="form-control" data-select-childids="DistrictId" data-select-value="@Model.CityId" data-select-url="/DropDownList/GetCityId" data-select-paramids="PronviceId" > <option value="">请选择</option> </select> </div> <div class="form-group"> <label>区</label> <select asp-for="DistrictId" class="form-control" data-select-value="@Model.DistrictId" data-select-url="/DropDownList/GetDistrictId" > <option value="">请选择</option> </select> </div> </div>
data-select-childids ：设置联动的select下拉的Id逗号分隔。例如在国家的下拉中 data-select-childids="LanguageId,PronviceId"表示，国家的下拉影响 语言和 省
data-select-value: 数据加载时的初始值 用在编辑表单时,存储当前下拉
data-select-url: 请求的url
data-select-paramids: 参数值的Id
