JS封裝的三級聯(lián)動菜單(使用時只需要一行js代碼)
更新時間：2016年10月24日 10:39:35 作者：夢亦曉
在實際的項目開發(fā)中，我們經(jīng)常需要三級聯(lián)動，比如省市區(qū)的選擇，商品的三級分類的選擇等等。這篇文章主要介紹了JS封裝的三級聯(lián)動菜單(使用時只需要一行js代碼)的相關(guān)資料,需要的朋友可以參考下
前言
在實際的項目開發(fā)中，我們經(jīng)常需要三級聯(lián)動，比如省市區(qū)的選擇，商品的三級分類的選擇等等。
而網(wǎng)上卻找不到一個代碼完整、功能強(qiáng)大、使用簡單的三級聯(lián)動菜單，大都只是簡單的講了一下實現(xiàn)思路。
下面就給大家分享我在工作中封裝并在項目中使用的三級級聯(lián)操作代碼，如有錯誤或者不當(dāng)?shù)牡胤綒g迎大家指正。
使用簡單(只需要一行代碼)
可以根據(jù)需要設(shè)置是否顯示“請選擇”項
支持回調(diào)(在三級分類加載完成后觸發(fā)回調(diào)事件)
支持一個頁面多個級聯(lián)菜單
演示效果預(yù)覽：
三級聯(lián)動封裝
原理：將selec標(biāo)簽以及相關(guān)的html代碼用js數(shù)組對象的方式結(jié)合在一起。
js如下：
全部代碼如下：
//三級分類選擇器 by 王軍華 20160721
var WJH_Category = {
Category1ID: "wjh_category1_select",
Category2ID: "wjh_category2_select",
Category3ID: "wjh_category3_select",
DataURL: "/Public/GetProductCategorys",//數(shù)據(jù)URL
//初始化
//wrapID : 包裹三級分類的標(biāo)簽ID
//category1： 省ID 對應(yīng) Value
//category2： 市ID 對應(yīng) Value
//category3： 縣ID 對應(yīng) Value
//useEmpty： 是否支持請選擇,如果為false則默認(rèn)三級都加載
//successCallBack：加載完成后的回調(diào)函數(shù)
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);
},
//初始化標(biāo)簽
InitTag: function (wrapID, useEmpty) {
var tmpInit = "";
tmpInit += "<span class='wjh_category1_span'>一級分類：</span>";
if (useEmpty) {
tmpInit += "<select id='" + WJH_Category.Category1ID + "' name='" + WJH_Category.Category1ID + "'><option value='0'>--請選擇--</option></select>";
} else {
tmpInit += "<select id='" + WJH_Category.Category1ID + "' name='" + WJH_Category.Category1ID + "'></select>";
}
tmpInit += "<span class='wjh_category2_span'>二級分類：</span>";
if (useEmpty) {
tmpInit += "<select id='" + WJH_Category.Category2ID + "' name='" + WJH_Category.Category2ID + "'><option value='0'>--請選擇--</option></select>";
} else {
tmpInit += "<select id='" + WJH_Category.Category2ID + "' name='" + WJH_Category.Category2ID + "'></select>";
}
tmpInit += "<span class='wjh_category3_span'>三級分類：</span>";
if (useEmpty) {
tmpInit += "<select id='" + WJH_Category.Category3ID + "' name='" + WJH_Category.Category3ID + "'><option value='0'>--請選擇--</option></select>";
} else {
tmpInit += "<select id='" + WJH_Category.Category3ID + "' name='" + WJH_Category.Category3ID + "'></select>";
}
$("#" + wrapID + "").html(tmpInit);
},
//初始化數(shù)據(jù)--包括修改
InitData: function (incategory1, incategory2, incategory3, useEmpty, successCallBack) {
//添加
if (incategory1 == 0) {
$.get(WJH_Category.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>";
$("#" + 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");
}
//修改
else {
$.get(WJH_Category.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>";
}
$("#" + 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");
});
}
};
三級聯(lián)動使用演示
本插件依賴jQuery，使用前請先在頁面上引入jQuery文件
先定義一個演示頁面如下：DIV1，DIV2是用來包裹生成的聯(lián)動菜單的
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>GetProductCategorys</title>
<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.帶“請選擇的”修改模式
給三級級聯(lián)菜單初始化時賦上默認(rèn)值(應(yīng)用場景：修改用戶的收貨地址、修改商品的所屬三級分類)
演示效果如下：
4.不帶“請選擇的”修改模式
演示效果如下：
5.修改select的name和id
結(jié)果如下：
6.修改獲取數(shù)據(jù)的URL
7.支持回調(diào)函數(shù)
支持回調(diào)函數(shù)的好處是在三級聯(lián)動菜單數(shù)據(jù)加載完畢后觸發(fā)回調(diào)函數(shù)，這樣可以解決的問題是：在html加載的時候使用聯(lián)動菜單里面的數(shù)據(jù)做一些特殊操作，比如：在頁面加載的時候就要根據(jù)三級聯(lián)動菜單里面的數(shù)據(jù)值到服務(wù)器查詢數(shù)據(jù)。
8.一個頁面多個級聯(lián)菜單
需要注意的是：如果一個頁面由多個相同的三級聯(lián)動菜單，那么一定要給三級聯(lián)動菜單對應(yīng)的select改名
***************注意下面這句話***************
上面封裝的三級操作使用比較簡單，但是不支持一個頁面顯示多個級聯(lián)菜單，因此我又將原代碼進(jìn)行改動(改成了閉包對象)以便支持一個頁面多個級聯(lián)菜單。但是操作上多了一行代碼。使用上大致一樣
代碼預(yù)覽：
改動后的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";//數(shù)據(jù)URL
//初始化
//wrapID : 包裹三級分類的標(biāo)簽ID
//category1： 省ID 對應(yīng) Value
//category2： 市ID 對應(yīng) Value
//category3： 縣ID 對應(yīng) Value
//useEmpty： 是否支持請選擇,如果為false則默認(rèn)三級都加載
//successCallBack：加載完成后的回調(diào)函數(shù)
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);
};
//初始化標(biāo)簽
this.InitTag = function (wrapID, useEmpty) {
var tmpInit = "";
tmpInit += "<span class='wjh_category1_span'>一級分類：</span>";
if (useEmpty) {
tmpInit += "<select id='" + this.Category1ID + "' name='" + this.Category1ID + "'><option value='0'>--請選擇--</option></select>";
} else {
tmpInit += "<select id='" + this.Category1ID + "' name='" + this.Category1ID + "'></select>";
}
tmpInit += "<span class='wjh_category2_span'>二級分類：</span>";
if (useEmpty) {
tmpInit += "<select id='" + this.Category2ID + "' name='" + this.Category2ID + "'><option value='0'>--請選擇--</option></select>";
} else {
tmpInit += "<select id='" + this.Category2ID + "' name='" + this.Category2ID + "'></select>";
}
tmpInit += "<span class='wjh_category3_span'>三級分類：</span>";
if (useEmpty) {
tmpInit += "<select id='" + this.Category3ID + "' name='" + this.Category3ID + "'><option value='0'>--請選擇--</option></select>";
} else {
tmpInit += "<select id='" + this.Category3ID + "' name='" + this.Category3ID + "'></select>";
}
$("#" + wrapID + "").html(tmpInit);
};
//初始化數(shù)據(jù)--包括修改
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");
});
}
}
使用如下：
代碼：
演示：
以上所述是小編給大家介紹的JS封裝的三級聯(lián)動菜單(使用時只需要一行js代碼)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
js 剪切板應(yīng)用clipboardData詳細(xì)解析
本篇文章主要介紹了js剪切板應(yīng)用clipboardData。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
詳解BootStrap中Affix控件的使用及保持布局的美觀的方法
Affix是BootStrap中的一個很有用的控件，他能夠監(jiān)視瀏覽器的滾動條的位置并讓你的導(dǎo)航始終都在頁面的可視區(qū)域。本文重點給大家介紹BootStrap中Affix控件的使用及保持布局的美觀的方法，感興趣的朋友一起看看吧2016-07-07
js中對函數(shù)設(shè)置默認(rèn)參數(shù)值的3種方法
這篇文章主要介紹了js中對函數(shù)設(shè)置默認(rèn)參數(shù)值的3種方法嗎，3種方法都具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-10-10
這篇文章主要為大家詳細(xì)介紹了微信JS-SDK選取手機(jī)照片上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
本篇文章小編給大家?guī)硪黄P(guān)于JS實現(xiàn)點擊展開點擊隱藏的效果代碼內(nèi)容，有興趣的朋友參考下。2018-09-09
???????基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果流程詳解
本文主要介紹了???????基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-11-11
javascript刪除數(shù)組重復(fù)元素的方法匯總
這篇文章主要介紹了javascript刪除數(shù)組重復(fù)元素的方法,實例匯總了幾種常用的javascript刪除數(shù)組重復(fù)元素的技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了ES6中的數(shù)組擴(kuò)展方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
微信小程序?qū)崿F(xiàn)音頻文件播放進(jìn)度的實例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)音頻文件播放進(jìn)度的實例代碼，代碼包括對進(jìn)度條的實現(xiàn)及進(jìn)度條的滑動，對大家的工作或?qū)W習(xí)具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
js中substr,substring,indexOf,lastIndexOf的用法小結(jié)
本篇文章主要是對js中substr,substring,indexOf,lastIndexOf的用法進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12