支持回调函数的好处是在三级联动菜单数据加载完毕后触发回调函数，这样可以解决的问题是：在html加载的时候使用联动菜单里面的数据做一些特殊操作，比如：在页面加载的时候就要根据三级联动菜单里面的数据值到服务器查询数据。

需要注意的是：如果一个页面由多个相同的三级联动菜单，那么一定要给三级联动菜单对应的select改名

***************注意下面这句话***************

上面封装的三级操作使用比较简单，但是不支持一个页面显示多个级联菜单，因此我又将原代码进行改动(改成了闭包对象)以便支持一个页面多个级联菜单。但是操作上多了一行代码。使用上大致一样

代码预览：

改动后的js代码如下：

WJH_Category_Plus() { this.Category1ID= "wjh_category1_select"; this.Category2ID = "wjh_category2_select"; this.Category3ID = "wjh_category3_select"; .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); }; .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) { var c1 = this.Category1ID; var c2 = this.Category2ID; var c3 = this.Category3ID; var dataUrl = this.DataURL; (incategory1 == 0) { $.get(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>"; $("#" + 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"); } { $.get(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>"; } $("#" + 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"); }); }); } }; .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"); }); }; .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 = $("#" + c2 + " 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"); }); } }

使用如下：

代码：

演示：