js封装的三级联动菜单(使用时只需要一行js代码) - 梦亦晓_H5之家

前言

在实际的项目开发中，我们经常需要三级联动，比如省市区的选择，商品的三级分类的选择等等。

而网上却找不到一个代码完整、功能强大、使用简单的三级联动菜单，大都只是简单的讲了一下实现思路。

下面就给大家分享我在工作中封装并在项目中使用的三级级联操作代码，如有错误或者不当的地方欢迎大家指正。

演示效果预览：

三级联动封装

原理：将selec标签以及相关的html代码用js数组对象的方式结合在一起。

js如下：

全部js代码如下：

WJH_Category = { Category1ID: "wjh_category1_select", Category2ID: "wjh_category2_select", Category3ID: "wjh_category3_select", DataURL: "/Public/GetProductCategorys",Init: function (wrapID, category1, category2, category3, useEmpty, successCallBack) { WJH_Category.InitTag(wrapID, useEmpty); WJH_Category.InitData(category1, category2, category3, useEmpty, successCallBack); WJH_Category.category1Select(useEmpty); WJH_Category.category2Select(useEmpty); }, //初始化标签 InitTag: function (wrapID, useEmpty) { var tmpInit = ""; tmpInit += "<span>一级分类：</span>"; if (useEmpty) { tmpInit += "<select><option value='0'>--请选择--</option></select>"; } else { tmpInit += "<select></select>"; } tmpInit += "<span>二级分类：</span>"; if (useEmpty) { tmpInit += "<select><option value='0'>--请选择--</option></select>"; } else { tmpInit += "<select></select>"; } tmpInit += "<span>三级分类：</span>"; if (useEmpty) { tmpInit += "<select><option value='0'>--请选择--</option></select>"; } else { tmpInit += "<select></select>"; } $("#" + wrapID + "").html(tmpInit); }, //初始化数据--包括修改 InitData: function (incategory1, incategory2, incategory3, useEmpty, successCallBack) { (incategory1 == 0) { $.get(WJH_Category.DataURL, {}, function (category1) { var firstcategory1Guid = category1[0].Value; (var i = 0; i < category1.length; i++) { var tmp_option = " <option value='" + category1[i].Value + "'>" + category1[i].Display + "</option>"; $("#" + WJH_Category.Category1ID + "").html($("#" + WJH_Category.Category1ID + "").html() + tmp_option); } if (useEmpty) { successCallBack(); return; } //初始化二级分类 $.get(WJH_Category.DataURL, { pid: firstcategory1Guid }, function (category2) { var firstcategory2Guid = category2[0].Value; for (var i = 0; i < category2.length; i++) { var tmp_option = " <option value='" + category2[i].Value + "'>" + category2[i].Display + "</option>"; $("#" + WJH_Category.Category2ID + "").html($("#" + WJH_Category.Category2ID + "").html() + tmp_option); } //初始化县 $.get(WJH_Category.DataURL, { pid: firstcategory2Guid }, function (category3) { for (var i = 0; i < category3.length; i++) { var tmp_option = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>"; $("#" + WJH_Category.Category3ID + "").html($("#" + WJH_Category.Category3ID + "").html() + tmp_option); } successCallBack(); }, "json"); }, "json"); }, "json"); } { $.get(WJH_Category.DataURL, {}, function (category1) { (var i = 0; i < category1.length; i++) { var tmp_option = ""; if (category1[i].Value == incategory1) { tmp_option = " <option selected='selected' value='" + category1[i].Value + "'>" + category1[i].Display + "</option>"; } else { tmp_option = " <option value='" + category1[i].Value + "'>" + category1[i].Display + "</option>"; } $("#" + WJH_Category.Category1ID + "").html($("#" + WJH_Category.Category1ID + "").html() + tmp_option); } //初始化二级分类 $.get(WJH_Category.DataURL, { pid: incategory1 }, function (category2) { for (var i = 0; i < category2.length; i++) { var tmp_option = ""; if (category2[i].Value == incategory2) { tmp_option = " <option selected='selected' value='" + category2[i].Value + "'>" + category2[i].Display + "</option>"; } else { tmp_option = " <option value='" + category2[i].Value + "'>" + category2[i].Display + "</option>"; } $("#" + WJH_Category.Category2ID + "").html($("#" + WJH_Category.Category2ID + "").html() + tmp_option); } //初始化三级分类 $.get(WJH_Category.DataURL, { pid: incategory2 }, function (category3) { for (var i = 0; i < category3.length; i++) { var tmp_option = ""; if (category3[i].Value == incategory3) { tmp_option = " <option selected='selected' value='" + category3[i].Value + "'>" + category3[i].Display + "</option>"; } else { tmp_option = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>"; } $("#" + WJH_Category.Category3ID + "").html($("#" + WJH_Category.Category3ID + "").html() + tmp_option); } successCallBack(); }, "json"); }); }); } }, //一级分类change category1Select: function (useEmpty) { $("#" + WJH_Category.Category1ID + "").change(function () { var optionHtml = ""; if (useEmpty) { optionHtml = "<option value='0'>--请选择--</option>"; } $("#" + WJH_Category.Category2ID + "").html(optionHtml); $("#" + WJH_Category.Category3ID + "").html(optionHtml); var tmpSelectedcategory1 = $("#" + WJH_Category.Category1ID + " option:selected").val(); //初始化二级分类 $.get(WJH_Category.DataURL, { pid: tmpSelectedcategory1 }, function (category2) { var firstcategory2Guid = category2[0].Value; for (var i = 0; i < category2.length; i++) { var tmp_option = " <option value='" + category2[i].Value + "'>" + category2[i].Display + "</option>"; $("#" + WJH_Category.Category2ID + "").html($("#" + WJH_Category.Category2ID + "").html() + tmp_option); } if (useEmpty) { return; } //初始化三级分类 $.get(WJH_Category.DataURL, { pid: firstcategory2Guid }, function (category3) { for (var i = 0; i < category3.length; i++) { var tmp_option = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>"; $("#" + WJH_Category.Category3ID + "").html($("#" + WJH_Category.Category3ID + "").html() + tmp_option); } }, "json"); }, "json"); }); }, //二级分类change category2Select: function (useEmpty) { $("#" + WJH_Category.Category2ID + "").change(function () { var optionHtml = ""; if (useEmpty) { optionHtml = "<option value='0'>--请选择--</option>"; } $("#" + WJH_Category.Category3ID + "").html(optionHtml); var tmpSelectedcategory2 = $("#" + WJH_Category.Category2ID + " option:selected").val(); //初始化三级分类 $.get(WJH_Category.DataURL, { pid: tmpSelectedcategory2 }, function (category3) { for (var i = 0; i < category3.length; i++) { var tmp_option = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>"; $("#" + WJH_Category.Category3ID + "").html($("#" + WJH_Category.Category3ID + "").html() + tmp_option); } }, "json"); }); } };

View Code

后台数据格式如下(可根据自己的需求更改数据源)：