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> ...
随机推荐
- Federated Identity Pattern 联合身份模式
Delegate authentication to an external identity provider. This pattern can simplify development, min ...
- Node.js大众点评爬虫
大众点评上有很多美食餐馆的信息,正好可以拿来练练手Node.js. 1. API分析 大众点评开放了查询商家信息的API,这里给出了城市与cityid之间的对应关系,链接http://m.api.di ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 选择目录，选择文件夹的COM组件问题。在可以调用 OLE 之前，必须将当前线程设置为单线程单元(STA)模式。请确保您的 Main 函数带有 STAThreadAttribute 标记。 只有将调试器附加到该进程才会引发此异常。
异常: 在可以调用 OLE 之前,必须将当前线程设置为单线程单元(STA)模式.请确保您的 Main 函数带有 STAThreadAttribute 标记. 只有将调试器附加到该进程才会引发此异常. ...
- （转）SqlServer 数据库同步的两种方式 (发布、订阅)，主从数据库之间的同步
最近在琢磨主从数据库之间的同步,公司正好也需要,在园子里找了一下,看到这篇博文比较详细,比较简单,本人亲自按步骤来过,现在分享给大家. 在这里要提醒大家的是(为了更好的理解,以下是本人自己理解,如有错 ...
- Stream
Stream的好处 1.Stream AP的引入弥补了JAVA函数式编程的缺陷.2.Stream相比集合类占用内存更小:集合类里的元素是存储在内存里的,Stream里的元素是在访问的时候才被计算出来. ...
- JQuery中$.ajax()方法参数详解
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
- 利用私有的API获得手机上所安装的所有应用信息（包括版本，名称，bundleID，类型）
MobileCoreService这个系统的库,里面有个私有的类LSApplicationWorkspace ,利用运行时可以获得私有类里面的方法,- (id)allInstalledApplicat ...
- 时间戳TimeStamp处理
我获得这个时间戳是得想除以1000再处理的,看看你们的需要先除多少再处理 //时间戳处理 NSInteger time = timeStamp / 1000; NSNumber *timer = [ ...
- React Native props & state
今天又敲了一丁点代码,看了一下props和state的用法 原本以为state只是一个状态,但是又阅读了一下原文,才知道state是一组状态,这些状态是开发者自己定义的,都统一在state这个大类底下 ...