JS封装的三级联动菜单(使用时只需要一行js代码)_javascript技巧

前言

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

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

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

使用简单(只需要一行代码)

可以根据需要设置是否显示“请选择”项

支持回调(在三级分类加载完成后触发回调事件)

支持一个页面多个级联菜单

演示效果预览：

三级联动封装

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

js如下：

全部代码如下：

//三级分类选择器 by 王军华 20160721
var WJH_Category = {
  Category1ID: "wjh_category1_select",
  Category2ID: "wjh_category2_select",
  Category3ID: "wjh_category3_select",
  DataURL: "/Public/GetProductCategorys",//数据URL
  //初始化
  //wrapID :  包裹三级分类的标签ID
  //category1： 省ID 对应 Value
  //category2：   市ID 对应 Value
  //category3：  县ID 对应 Value
  //useEmpty： 是否支持请选择,如果为false则默认三级都加载
  //successCallBack：加载完成后的回调函数
  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 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);
  },
  //初始化数据--包括修改
  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");
    });
  }
};

三级联动使用演示

本插件依赖jQuery，使用前请先在页面上引入jQuery文件

先定义一个演示页面如下：DIV1，DIV2是用来包裹生成的联动菜单的

<!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.带“请选择的”修改模式

给三级级联菜单初始化时赋上默认值(应用场景：修改用户的收货地址、修改商品的所属三级分类)

演示效果如下：

4.不带“请选择的”修改模式

演示效果如下：

5.修改select的name和id

结果如下：

6.修改获取数据的URL

7.支持回调函数

支持回调函数的好处是在三级联动菜单数据加载完毕后触发回调函数，这样可以解决的问题是：在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 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);
};
//初始化数据--包括修改
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封装的三级联动菜单(使用时只需要一行js代码)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索js三级联动菜单
javascript三级联动、javascript二级联动、javascript联动、javascript 多级联动、javascript 联动菜单，以便于您获取更多的相关知识。

时间： 2024-06-16 10:47:23

JS封装的三级联动菜单(使用时只需要一行js代码)_javascript技巧的相关文章

【JS+CSS3】实现带预览图幻灯片效果的示例代码_javascript技巧

一.前期准备 1.1 案例分析 适用场景:单例布局 1.2 方法论 V视图 HTML+CSS+调试 C js实现控制流程 D数据 优化扩展 二.代码 结构 <div class="slider"><!-- 特效区 --> <div class="main"><!-- 主视图区 --> <div class="main_i"> <div class="caption&quo

JS当前页面登录注册框,固定DIV,底层阴影的实例代码_javascript技巧

这是一个实例,保存代码为html文件运行试试吧.兼容火狐.ie6.ie7.ie8.Chrome等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

js实现随屏幕滚动的带缓冲效果的右下角广告代码_javascript技巧

本文实例讲述了js实现随屏幕滚动的带缓冲效果的右下角广告代码.分享给大家供大家参考.具体如下: 一个随屏幕自动滚动的右下角广告代码,这里请注意几个参数: id 你要滚动的内容的id r 放在左边还是右边 默认是右边 t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边 f 1表示固定 不写或者0表示滚动(ie6固定无效) 是不是很实用呢,这个版本经过作者二次修正,兼容性还不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-

JS实现先显示大图后自动收起显示小图的广告代码_javascript技巧

本文实例讲述了JS实现先显示大图后自动收起显示小图的广告代码.分享给大家供大家参考.具体如下: 这是一个非常不错的JavaScript图片特效,当最初打开网页的时候,显示的是大图片,就像遮屏广告一样,停留一会后,自动缓慢收起,这时由JS控制更换广告图片,始终显示在网页顶部,在一些大门户网站我们经常见到这种效果,个人感觉挺酷哦! 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-big-to-small-pic-adv-codes/ 具体代

js判断复选框是否选中及选中个数的实现代码_javascript技巧

用js判断复选框是否选中及选中个数,以前经常有朋友提到复选框的选中问题,这段代码可以帮你解决这个问题,而且它还可以判断你选择了多少个复选框,多选则弹出提示 <HTML> <head> <title>判断复选框是否选中及选中个数</title> <SCRIPT LANGUAGE="JavaScript"> function countChoices(obj) { max = 2; box1 = obj.form.box1.che

js实现浮动在网页右侧的简洁QQ在线客服代码_javascript技巧

本文实例讲述了js实现浮动在网页右侧的简洁QQ在线客服代码.分享给大家供大家参考.具体如下: 这是一个简洁版的QQ在线客服,其实重要的是这个JS函数,只要有了这个JS函数,实际上你完全可以写一个这样的在线客服,它是用JS+CSS去控制层的隐藏与展开.注意代码中的QQ号记着要改一下哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-float-qq-onlinefk-style-codes/ 具体代码如下: <!DOCTYPE html P

JS传递对象数组为参数给后端,后端获取的实例代码_javascript技巧

前端JS代码: var conditons = []; var test1 = new Object(); test1.name="1"; test1.id="2"; var test2 = new Object(); test2.name="1"; test2.id="2"; conditons.push(test1); conditons.push(test2); $(function(){ $.ajax({ async:

JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码_javascript技巧

本文实例讲述了JS实现模拟百度搜索"2012世界末日"网页地震撕裂效果代码.分享给大家供大家参考,具体如下: 这是一款JS模拟百度搜索"2012世界末日"网页地震撕裂效果,本效果是模仿用户在百度输入"2012世界末日"后点击搜索后出来的网页效果,网页在震动,像是地震了,而后开始撕裂,然后显示出相关的文字说明,很酷的效果,希望大家可以学习借鉴. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-

js捕获鼠标右键菜单中的粘帖事件实现代码_javascript技巧

比如点击菜单中的"粘帖"后事件如何捕获  问题解决了! 用的jQuery中的paste事件,这里需要注意,如想获得粘帖文本要使用setTimeout控制下时间. 复制代码 代码如下: $("#input").bind('paste', function(e) { var el = $(this); setTimeout(function() { var text = $(el).val(); alert(text); }, 100); }); 貌似是在1.4版后加上