JS封裝的三級(jí)聯(lián)動(dòng)菜單(使用時(shí)只需要一行js代碼)

更新時(shí)間：2016年10月24日 10:39:35 作者：夢(mèng)亦曉

在實(shí)際的項(xiàng)目開(kāi)發(fā)中，我們經(jīng)常需要三級(jí)聯(lián)動(dòng)，比如省市區(qū)的選擇，商品的三級(jí)分類(lèi)的選擇等等。這篇文章主要介紹了JS封裝的三級(jí)聯(lián)動(dòng)菜單(使用時(shí)只需要一行js代碼)的相關(guān)資料,需要的朋友可以參考下

前言

在實(shí)際的項(xiàng)目開(kāi)發(fā)中，我們經(jīng)常需要三級(jí)聯(lián)動(dòng)，比如省市區(qū)的選擇，商品的三級(jí)分類(lèi)的選擇等等。

而網(wǎng)上卻找不到一個(gè)代碼完整、功能強(qiáng)大、使用簡(jiǎn)單的三級(jí)聯(lián)動(dòng)菜單，大都只是簡(jiǎn)單的講了一下實(shí)現(xiàn)思路。

下面就給大家分享我在工作中封裝并在項(xiàng)目中使用的三級(jí)級(jí)聯(lián)操作代碼，如有錯(cuò)誤或者不當(dāng)?shù)牡胤綒g迎大家指正。

使用簡(jiǎn)單(只需要一行代碼)

可以根據(jù)需要設(shè)置是否顯示“請(qǐng)選擇”項(xiàng)

支持回調(diào)(在三級(jí)分類(lèi)加載完成后觸發(fā)回調(diào)事件)

支持一個(gè)頁(yè)面多個(gè)級(jí)聯(lián)菜單

演示效果預(yù)覽：

三級(jí)聯(lián)動(dòng)封裝

原理：將selec標(biāo)簽以及相關(guān)的html代碼用js數(shù)組對(duì)象的方式結(jié)合在一起。

js如下：

全部代碼如下：

//三級(jí)分類(lèi)選擇器 by 王軍華 20160721
var WJH_Category = {
  Category1ID: "wjh_category1_select",
  Category2ID: "wjh_category2_select",
  Category3ID: "wjh_category3_select",
  DataURL: "/Public/GetProductCategorys",//數(shù)據(jù)URL
  //初始化
  //wrapID :  包裹三級(jí)分類(lèi)的標(biāo)簽ID
  //category1： 省ID 對(duì)應(yīng) Value
  //category2：   市ID 對(duì)應(yīng) Value
  //category3：  縣ID 對(duì)應(yīng) Value
  //useEmpty： 是否支持請(qǐng)選擇,如果為false則默認(rèn)三級(jí)都加載
  //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'>一級(jí)分類(lèi)：</span>";
    if (useEmpty) {
      tmpInit += "<select id='" + WJH_Category.Category1ID + "' name='" + WJH_Category.Category1ID + "'><option value='0'>--請(qǐng)選擇--</option></select>";
    } else {
      tmpInit += "<select id='" + WJH_Category.Category1ID + "' name='" + WJH_Category.Category1ID + "'></select>";
    }
    tmpInit += "<span class='wjh_category2_span'>二級(jí)分類(lèi)：</span>";
    if (useEmpty) {
      tmpInit += "<select id='" + WJH_Category.Category2ID + "' name='" + WJH_Category.Category2ID + "'><option value='0'>--請(qǐng)選擇--</option></select>";
    } else {
      tmpInit += "<select id='" + WJH_Category.Category2ID + "' name='" + WJH_Category.Category2ID + "'></select>";
    }
    tmpInit += "<span class='wjh_category3_span'>三級(jí)分類(lèi)：</span>";
    if (useEmpty) {
      tmpInit += "<select id='" + WJH_Category.Category3ID + "' name='" + WJH_Category.Category3ID + "'><option value='0'>--請(qǐng)選擇--</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;
        //初始化一級(jí)分類(lèi)
        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;
        }
        //初始化二級(jí)分類(lèi)
        $.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) {
        //初始化一級(jí)分類(lèi)
        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);
        }
        //初始化二級(jí)分類(lèi)
        $.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);
          }
          //初始化三級(jí)分類(lèi)
          $.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");
        });
      });
    }
  },
  //一級(jí)分類(lèi)change
  category1Select: function (useEmpty) {
    $("#" + WJH_Category.Category1ID + "").change(function () {
      var optionHtml = "";
      if (useEmpty) {
        optionHtml = "<option value='0'>--請(qǐng)選擇--</option>";
      }
      $("#" + WJH_Category.Category2ID + "").html(optionHtml);
      $("#" + WJH_Category.Category3ID + "").html(optionHtml);
      var tmpSelectedcategory1 = $("#" + WJH_Category.Category1ID + " option:selected").val();
      //初始化二級(jí)分類(lèi)
      $.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;
        }
        //初始化三級(jí)分類(lèi)
        $.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");
    });
  },
  //二級(jí)分類(lèi)change
  category2Select: function (useEmpty) {
    $("#" + WJH_Category.Category2ID + "").change(function () {
      var optionHtml = "";
      if (useEmpty) {
        optionHtml = "<option value='0'>--請(qǐng)選擇--</option>";
      }
      $("#" + WJH_Category.Category3ID + "").html(optionHtml);
      var tmpSelectedcategory2 = $("#" + WJH_Category.Category2ID + " option:selected").val();
      //初始化三級(jí)分類(lèi)
      $.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");
    });
  }
};

三級(jí)聯(lián)動(dòng)使用演示

本插件依賴(lài)jQuery，使用前請(qǐng)先在頁(yè)面上引入jQuery文件

先定義一個(gè)演示頁(yè)面如下：DIV1，DIV2是用來(lái)包裹生成的聯(lián)動(dòng)菜單的

<!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.帶“請(qǐng)選擇的”添加模式

演示效果如下：

2.不帶“請(qǐng)選擇的”添加模式

演示效果如下：

3.帶“請(qǐng)選擇的”修改模式

給三級(jí)級(jí)聯(lián)菜單初始化時(shí)賦上默認(rèn)值(應(yīng)用場(chǎng)景：修改用戶(hù)的收貨地址、修改商品的所屬三級(jí)分類(lèi))

演示效果如下：

4.不帶“請(qǐng)選擇的”修改模式

演示效果如下：

5.修改select的name和id

結(jié)果如下：

6.修改獲取數(shù)據(jù)的URL

7.支持回調(diào)函數(shù)

支持回調(diào)函數(shù)的好處是在三級(jí)聯(lián)動(dòng)菜單數(shù)據(jù)加載完畢后觸發(fā)回調(diào)函數(shù)，這樣可以解決的問(wèn)題是：在html加載的時(shí)候使用聯(lián)動(dòng)菜單里面的數(shù)據(jù)做一些特殊操作，比如：在頁(yè)面加載的時(shí)候就要根據(jù)三級(jí)聯(lián)動(dòng)菜單里面的數(shù)據(jù)值到服務(wù)器查詢(xún)數(shù)據(jù)。

8.一個(gè)頁(yè)面多個(gè)級(jí)聯(lián)菜單

需要注意的是：如果一個(gè)頁(yè)面由多個(gè)相同的三級(jí)聯(lián)動(dòng)菜單，那么一定要給三級(jí)聯(lián)動(dòng)菜單對(duì)應(yīng)的select改名

***************注意下面這句話***************

上面封裝的三級(jí)操作使用比較簡(jiǎn)單，但是不支持一個(gè)頁(yè)面顯示多個(gè)級(jí)聯(lián)菜單，因此我又將原代碼進(jìn)行改動(dòng)(改成了閉包對(duì)象)以便支持一個(gè)頁(yè)面多個(gè)級(jí)聯(lián)菜單。但是操作上多了一行代碼。使用上大致一樣

代碼預(yù)覽：

改動(dòng)后的js代碼如下：

//三級(jí)分類(lèi)選擇器 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 : 包裹三級(jí)分類(lèi)的標(biāo)簽ID
//category1： 省ID 對(duì)應(yīng) Value
//category2： 市ID 對(duì)應(yīng) Value
//category3： 縣ID 對(duì)應(yīng) Value
//useEmpty： 是否支持請(qǐng)選擇,如果為false則默認(rèn)三級(jí)都加載
//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'>一級(jí)分類(lèi)：</span>";
if (useEmpty) {
tmpInit += "<select id='" + this.Category1ID + "' name='" + this.Category1ID + "'><option value='0'>--請(qǐng)選擇--</option></select>";
} else {
tmpInit += "<select id='" + this.Category1ID + "' name='" + this.Category1ID + "'></select>";
}
tmpInit += "<span class='wjh_category2_span'>二級(jí)分類(lèi)：</span>";
if (useEmpty) {
tmpInit += "<select id='" + this.Category2ID + "' name='" + this.Category2ID + "'><option value='0'>--請(qǐng)選擇--</option></select>";
} else {
tmpInit += "<select id='" + this.Category2ID + "' name='" + this.Category2ID + "'></select>";
}
tmpInit += "<span class='wjh_category3_span'>三級(jí)分類(lèi)：</span>";
if (useEmpty) {
tmpInit += "<select id='" + this.Category3ID + "' name='" + this.Category3ID + "'><option value='0'>--請(qǐng)選擇--</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;
//初始化一級(jí)分類(lèi)
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;
}
//初始化二級(jí)分類(lèi)
$.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) {
//初始化一級(jí)分類(lèi)
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);
}
//初始化二級(jí)分類(lèi)
$.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);
}
//初始化三級(jí)分類(lèi)
$.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");
});
});
}
};
//一級(jí)分類(lèi)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'>--請(qǐng)選擇--</option>";
}
$("#" + c2+ "").html(optionHtml);
$("#" + c3 + "").html(optionHtml);
var tmpSelectedcategory1 = $("#" + c1 + " option:selected").val();
//初始化二級(jí)分類(lèi)
$.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;
}
//初始化三級(jí)分類(lèi)
$.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");
});
};
//二級(jí)分類(lèi)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'>--請(qǐng)選擇--</option>";
}
$("#" + c3+ "").html(optionHtml);
var tmpSelectedcategory2 = $("#" + this.Category2ID + " option:selected").val();
//初始化三級(jí)分類(lèi)
$.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封裝的三級(jí)聯(lián)動(dòng)菜單(使用時(shí)只需要一行js代碼)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: