js封装的三级联动菜单(使用时只需要一行js代码)
前言
在实际的项目开发中，我们经常需要三级联动，比如省市区的选择，商品的三级分类的选择等等。
而网上却找不到一个代码完整、功能强大、使用简单的三级联动菜单，大都只是简单的讲了一下实现思路。
下面就给大家分享我在工作中封装并在项目中使用的三级级联操作代码，如有错误或者不当的地方欢迎大家指正。
- 使用简单(只需要一行代码)
- 可以根据需要设置是否显示“请选择”项
- 支持回调(在三级分类加载完成后触发回调事件)
- 支持一个页面多个级联菜单
演示效果预览：
三级联动封装
原理：将selec标签以及相关的html代码用js数组对象的方式结合在一起。
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");
});
}
};
后台数据格式如下(可根据自己的需求更改数据源)：
public ActionResult GetProductCategorys(int? pid = null)
{
if (pid == null)
{
var list = db.Pms_Category.Where(c => c.Deleted == false && c.Levels == ).Select(c => new { Value = c.ID, Display = c.CName }).ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
else
{
var list = db.Pms_Category.Where(c => c.Deleted == false && c.ParentID == pid).Select(c => new { Value = c.ID, Display = c.CName }).ToList();
return Json(list, JsonRequestBehavior.AllowGet);
} }
后台数据格式
三级联动使用演示
本插件依赖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 = $("#" + 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");
});
}
}
js级联操作增强版
使用如下：
代码：
演示：
js封装的三级联动菜单(使用时只需要一行js代码)的更多相关文章
- JS+CSS打造三级折叠菜单，自动收缩其它级 js
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- 转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
- 基于jQuery的AJAX实现三级联动菜单
最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...
- JS实现年月日三级联动+省市区三级联动+国家省市三级联动
开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...
- 基于JQ的三级联动菜单选择
<!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...
- css 实现三级联动菜单
昨天因为项目中想要把二级联动菜单改成三级联动菜单,所以我就单独写了一个tab导航栏,用纯css的方式实现的三级联动.一开始我想着可以用js实现,但是js的hover事件和mouseenter,mous ...
- jQuery实现三级联动菜单（鼠标悬停联动）
效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> < ...
- js原生实现三级联动下拉菜单
js代码: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
- js+ajax编码三级联动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- ASP.NET Core 中文文档 第二章 指南（8） 使用 dotnet watch 开发 ASP.NET Core 应用程序
原文:Developing ASP.NET Core applications using dotnet watch 作者:Victor Hurdugaci 翻译:谢炀(Kiler) 校对:刘怡(Al ...
- CSS3 值得称赞新特性
Html5和CSS3相信大家现在都已不陌生了吧,但CSS3哪些新特性值得我们去称赞呢? 首先还是让大家来看几张效果图,相信大家看到这些效果图,肯定会说这些效果只用CSS是如何实现的呢? 1.3D正方形 ...
- .NET 版本区别，以及与 Windows 的关系
老是记不住各 Windows 版本中的 .NET 版本号,下面汇总一下: .NET Framework各版本汇总以及之间的关系 Mailbag: What version of the .NET Fr ...
- 微服务（Microservices）—Martin Fowler【翻译】
本文转载自:http://www.cnblogs.com/liuning8023/p/4493156.html -------------------------------------------- ...
- [转载]iOS 10 UserNotifications 框架解析
活久见的重构 - iOS 10 UserNotifications 框架解析 TL;DR iOS 10 中以前杂乱的和通知相关的 API 都被统一了,现在开发者可以使用独立的 UserNotifica ...
- spring源码：核心组件（li）
一.AOP实现 Spring代理对象的产生:代理的目的是调用目标方法时我们可以转而执行InvocationHandler类的invoke方法,所以如何在InvocationHandler上做文章就是S ...
- Java web.xml 配置详解
在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是 ...
- jsPanel插件Option总结
jsPanel插件Option总结 学习jsPanel之余对相关的选项进行了总结,便于参考. # 选项名称 类别 简要说明 1 autoclose configuration 设置一个时间在毫秒后,面 ...
- html5上传图片(一)一跨域上传
最近开发一个上传图片的模块,传图片的接口不支持跨域上传,并且只支持单张上传,而我们的产品要求要实现多张上传.我搞了一个代理页面,先将图片传到代理页面,然后再通过代理页面传到上传图片接口.虽然这种方式经 ...
- 3种方法快速制作tpk文件 [转]
tpk是ArcGIS10.1推出的一种新的数据文件类型,主要是用于将切片文件打包形成离线地图包,tpk可以在ArcGIS Runtime或者ArcGIS for Android/iOS中作为切片底图被 ...