HTML5技术

js封装的三级联动菜单(使用时只需要一行js代码) - 梦亦晓(2)

字号+ 作者:H5之家 来源:H5之家 2016-10-27 12:00 我要评论( )

public ActionResult GetProductCategorys( int ? pid = null ){ if (pid == null ){ var list = db.Pms_Category.Where(c = c.Deleted == false c.Levels == 1 ).Select(c = new { Value = c.ID, Display = c.CNam

public ActionResult GetProductCategorys(int? pid = null) { if (pid == null) { var list = db.Pms_Category.Where(c => c.Deleted == false && c.Levels == 1).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是用来包裹生成的联动菜单的

GetProductCategorys $(function () { ); }); div>

 

1.带“请选择的”添加模式

演示效果如下:

2.不带“请选择的”添加模式

演示效果如下:

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

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

演示效果如下:

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

演示效果如下:

5.修改select的name和id

结果如下:

 

6.修改获取数据的URL

7.支持回调函数

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JS组件系列——分享自己封装的Bootstrap树形组件:jqTree - 懒得安分

    JS组件系列——分享自己封装的Bootstrap树形组件:jqTree - 懒得安分

    2016-01-20 11:00

  • [自己动手玩黑科技] 1、小黑科技——如何将普通的家电改造成可以与手机App联动的“智能硬件” - beautifulz

    [自己动手玩黑科技] 1、小黑科技——如何将普通的家电改造成可以与手

    2015-11-16 19:40

网友点评
[