支持回调函数的好处是在三级联动菜单数据加载完毕后触发回调函数，这样可以解决的问题是：在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 += "<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); }; //初始化数据--包括修改 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 = " <option value='" + category1[i].Value + "'>" + category1[i].Display + "</option>"; $("#" + 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 = " <option value='" + category2[i].Value + "'>" + category2[i].Display + "</option>"; $("#" + c2 + "").html($("#" + c2 + "").html() + tmp_option); } //初始化县 $.get(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>"; $("#" + 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 = " <option selected='selected' value='" + category1[i].Value + "'>" + category1[i].Display + "</option>"; } else { tmp_option = " <option value='" + category1[i].Value + "'>" + category1[i].Display + "</option>"; } $("#" + 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 = " <option selected='selected' value='" + category2[i].Value + "'>" + category2[i].Display + "</option>"; } else { tmp_option = " <option value='" + category2[i].Value + "'>" + category2[i].Display + "</option>"; } $("#" + 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 = " <option selected='selected' value='" + category3[i].Value + "'>" + category3[i].Display + "</option>"; } else { tmp_option = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>"; } $("#" + 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 = "<option value='0'>--请选择--</option>"; } $("#" + 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 = " <option value='" + category2[i].Value + "'>" + category2[i].Display + "</option>"; $("#" + 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 = " <option value='" + category3[i].Value + "'>" + category3[i].Display + "</option>"; $("#" + 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 = "<option value='0'>--请选择--</option>"; } $("#" + c3+ "").html(optionHtml); var tmpSelectedcategory2 = $("#" + this.Category2ID + " option:selected").val(); //初始化三级分类 $.get(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>"; $("#" +c3 + "").html($("#" + c3+ "").html() + tmp_option); } }, "json"); }); } }
使用如下：
代码：
演示：
