前言在实际的项目开发中，我们经常需要三级联动，比如省市区的选择，商品的三级分类的选择等等。 而网上却找不到一个代码完整、功能强大、使用简单的三级联动菜单，大都只是简单的讲了一下实现思路。 下面就给大家分享我在工作中封装并在项目中使用的三级级联操作代码，如有错误或者不当的地方欢迎大家指正。
演示效果预览： 三级联动封装原理：将selec标签以及相关的html代码用js数组对象的方式结合在一起。 js如下： 全部js代码如下：
后台数据格式如下(可根据自己的需求更改数据源)： public ActionResult GetProductCategorys(int? pid = null) { if (pid == null) { var list = db.Pms_Category.Where(c => c.Deleted == false && c.Levels == 1).Select(c => new { Value = c.ID, Display = c.CName }).ToList(); return Json(list, JsonRequestBehavior.AllowGet); } else { var list = db.Pms_Category.Where(c => c.Deleted == false && c.ParentID == pid).Select(c => new { Value = c.ID, Display = c.CName }).ToList(); return Json(list, JsonRequestBehavior.AllowGet); } } 后台数据格式三级联动使用演示 本插件依赖jQuery，使用前请先在页面上引入jQuery文件 先定义一个演示页面如下：DIV1，DIV2是用来包裹生成的联动菜单的 html> head> meta name='viewport' content='width=device-width' /> title>GetProductCategorystitle> script src='~/Scripts/jquery-1.10.2.js'>script> script src='~/Scripts/extjs/product_category_select.js'>script> head> body> script> $(function () { //添加模式 WJH_Category.Init('DIV1', 0, 0, 0, true); }); script> div id='DIV1'>div> div id='DIV2'>div> body> html>1、带“请选择的”添加模式
演示效果如下：
2、不带“请选择的”添加模式
演示效果如下：
3、带“请选择的”修改模式给三级级联菜单初始化时赋上默认值(应用场景：修改用户的收货地址、修改商品的所属三级分类)
演示效果如下：
4、不带“请选择的”修改模式
演示效果如下：
5、修改select的name和id
结果如下：
6、修改获取数据的URL
7、支持回调函数支持回调函数的好处是在三级联动菜单数据加载完毕后触发回调函数，这样可以解决的问题是：在html加载的时候使用联动菜单里面的数据做一些特殊操作，比如：在页面加载的时候就要根据三级联动菜单里面的数据值到服务器查询数据。
8、一个页面多个级联菜单需要注意的是：如果一个页面由多个相同的三级联动菜单，那么一定要给三级联动菜单对应的select改名
***************注意下面这句话*************** 上面封装的三级操作使用比较简单，但是不支持一个页面显示多个级联菜单，因此我又将原代码进行改动(改成了闭包对象)以便支持一个页面多个级联菜单。但是操作上多了一行代码。使用上大致一样 代码预览：
改动后的js代码如下： //三级分类选择器 by 王军华 20160721 function WJH_Category_Plus() { this.Category1ID= 'wjh_category1_select'; this.Category2ID = 'wjh_category2_select'; this.Category3ID = 'wjh_category3_select'; this.DataURL = '/Public/GetProductCategorys';//数据URL //初始化 //wrapID : 包裹三级分类的标签ID //category1： 省ID 对应 Value //category2： 市ID 对应 Value //category3： 县ID 对应 Value //useEmpty： 是否支持请选择,如果为false则默认三级都加载 //successCallBack：加载完成后的回调函数 this.Init = function (wrapID, category1, category2, category3, useEmpty, successCallBack) { this.InitTag(wrapID, useEmpty); this.InitData(category1, category2, category3, useEmpty, successCallBack); this.category1Select(useEmpty); this.category2Select(useEmpty); }; //初始化标签 this.InitTag = function (wrapID, useEmpty) { var tmpInit = ''; tmpInit += '一级分类：'; if (useEmpty) { tmpInit += ' + this.Category1ID + '' name='' + this.Category1ID + ''>; } else { tmpInit += ' + this.Category1ID + '' name='' + this.Category1ID + ''>'; } tmpInit += '二级分类：'; if (useEmpty) { tmpInit += ' + this.Category2ID + '' name='' + this.Category2ID + ''>; } else { tmpInit += ' + this.Category2ID + '' name='' + this.Category2ID + ''>'; } tmpInit += '三级分类：'; if (useEmpty) { tmpInit += ' + this.Category3ID + '' name='' + this.Category3ID + ''>; } else { tmpInit += ' + this.Category3ID + '' name='' + this.Category3ID + ''>'; } $('#' + wrapID + '').html(tmpInit); }; //初始化数据--包括修改 this.InitData = function (incategory1, incategory2, incategory3, useEmpty, successCallBack) { var c1 = this.Category1ID; var c2 = this.Category2ID; var c3 = this.Category3ID; var dataUrl = this.DataURL; //添加 if (incategory1 == 0) { $.get(dataUrl, {}, function (category1) { var firstcategory1Guid = category1[0].Value; //初始化一级分类 for (var i = 0; i < category1.length;="" i++)="" {="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="">var tmp_option = ' + category1[i].Value + ''>' + category1[i].Display + ''; $('#' + c1 + '').html($('#' + c1 + '').html() + tmp_option); } if (useEmpty) { successCallBack(); return; } //初始化二级分类 $.get(dataUrl, { pid: firstcategory1Guid }, function (category2) { var firstcategory2Guid = category2[0].Value; for (var i = 0; i < category2.length;="" i++)="" {="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="">var tmp_option = ' + category2[i].Value + ''>' + category2[i].Display + ''; $('#' + c2 + '').html($('#' + c2 + '').html() + tmp_option); } //初始化县 $.get(dataUrl, { pid: firstcategory2Guid }, function (category3) { for (var i = 0; i < category3.length;="" i++)="" {="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="">var tmp_option = ' + category3[i].Value + ''>' + category3[i].Display + ''; $('#' + c3 + '').html($('#' + c3 + '').html() + tmp_option); } successCallBack(); }, 'json'); }, 'json'); }, 'json'); } //修改 else { $.get(dataUrl, {}, function (category1) { //初始化一级分类 for (var i = 0; i < category1.length;="" i++)="" {="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="">var tmp_option = ''; if (category1[i].Value == incategory1) { tmp_option = ' + category1[i].Value + ''>' + category1[i].Display + ''; } else { tmp_option = ' + category1[i].Value + ''>' + category1[i].Display + ''; } $('#' + c1 + '').html($('#' + c1 + '').html() + tmp_option); } //初始化二级分类 $.get(dataUrl, { pid: incategory1 }, function (category2) { for (var i = 0; i < category2.length;="" i++)="" {="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="">var tmp_option = ''; if (category2[i].Value == incategory2) { tmp_option = ' + category2[i].Value + ''>' + category2[i].Display + ''; } else { tmp_option = ' + category2[i].Value + ''>' + category2[i].Display + ''; } $('#' + c2+ '').html($('#' + c2 + '').html() + tmp_option); } //初始化三级分类 $.get(dataUrl, { pid: incategory2 }, function (category3) { for (var i = 0; i < category3.length;="" i++)="" {="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="">var tmp_option = ''; if (category3[i].Value == incategory3) { tmp_option = ' + category3[i].Value + ''>' + category3[i].Display + ''; } else { tmp_option = ' + category3[i].Value + ''>' + category3[i].Display + ''; } $('#' + c3 + '').html($('#' + c3 + '').html() + tmp_option); } successCallBack(); }, 'json'); }); }); } }; //一级分类change this.category1Select = function (useEmpty) { var c1 = this.Category1ID; var c2 = this.Category2ID; var c3 = this.Category3ID; var dataUrl = this.DataURL; $('#' + c1 + '').change(function () { var optionHtml = ''; if (useEmpty) { optionHtml = '; } $('#' + c2+ '').html(optionHtml); $('#' + c3 + '').html(optionHtml); var tmpSelectedcategory1 = $('#' + c1 + ' option:selected').val(); //初始化二级分类 $.get(dataUrl, { pid: tmpSelectedcategory1 }, function (category2) { var firstcategory2Guid = category2[0].Value; for (var i = 0; i < category2.length;="" i++)="" {="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="">var tmp_option = ' + category2[i].Value + ''>' + category2[i].Display + ''; $('#' + c2 + '').html($('#' +c2+ '').html() + tmp_option); } if (useEmpty) { return; } //初始化三级分类 $.get(dataUrl, { pid: firstcategory2Guid }, function (category3) { for (var i = 0; i < category3.length;="" i++)="" {="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="">var tmp_option = ' + category3[i].Value + ''>' + category3[i].Display + ''; $('#' + c3 + '').html($('#' + c3 + '').html() + tmp_option); } }, 'json'); }, 'json'); }); }; //二级分类change this.category2Select = function (useEmpty) { var c1 = this.Category1ID; var c2 = this.Category2ID; var c3 = this.Category3ID; var dataUrl = this.DataURL; $('#' + c2 + '').change(function () { var optionHtml = ''; if (useEmpty) { optionHtml = '; } $('#' + c3+ '').html(optionHtml); var tmpSelectedcategory2 = $('#' + c2 + ' option:selected').val(); //初始化三级分类 $.get(dataUrl, { pid: tmpSelectedcategory2 }, function (category3) { for (var i = 0; i < category3.length;="" i++)="" {="" ="" ="" ="" ="" ="" ="" ="" ="" ="" ="">var tmp_option = ' + category3[i].Value + ''>' + category3[i].Display + ''; $('#' +c3 + '').html($('#' + c3+ '').html() + tmp_option); } }, 'json'); }); } } js级联操作增强版使用如下： 代码：
演示：
●本文编号300，以后想阅读这篇文章直接输入300即可。 ●输入m可以获取到文章目录 Web开发 推荐：《15个技术类公众微信》 涵盖：程序人生、算法与数据结构、黑客技术与网络安全、大数据技术、前端开发、Java、Python、Web开发、安卓开发、iOS开发、C/C++、.NET、Linux、数据库、运维等。 |
|
|
