jquery无限级联下拉菜单简单实例演示


Posted in Javascript onNovember 23, 2015

本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路。分享给大家供大家参考。具体如下:

最终效果图:

jquery无限级联下拉菜单简单实例演示

因为是级联,所以数据必须是树型结构的,这里的测试数据如下:

jquery无限级联下拉菜单简单实例演示

看下效果图:

1、效果图一:

 jquery无限级联下拉菜单简单实例演示

2、效果图二:

 jquery无限级联下拉菜单简单实例演示

3、效果图三:

 jquery无限级联下拉菜单简单实例演示

 

由图可知,下拉框的个数并不是写死的,而是动态加载的。每当下拉框选择改变的时候,会发送一次ajax请求,请求成功返回json格式数据,当返回的数据不为空时(即有子节点时),则会向页面中添加一个下拉框,没有则不添加。

插件的实现代码如下:

(function ($) {
 $.fn.CascadingSelect = function (options) {

  //默认参数设置
  var settings = {
   url: "/Handler.ashx", //请求路径
   data: "0",    //初始值(字符串格式)
   split: ",",    //分割符
   cssName: "select",  //样式名称
   val: "id",    //<option value="id">name</option>
   text: "name",   //<option value="id">name</option>
   hiddenName: "selVal" //隐藏域的name属性的值
  }

  //合并参数
  if (options)
   $.extend(settings, options);


  //链式原则
  return this.each(function () {

   init($(this), settings.data);

   /*
   初始化
   @param container 容器对象
   @param data   初始值
   */
   function init(container, data) {

    //创建隐藏域对象,并赋初始值
    var _input = $("<input type='hidden' name='" + settings.hiddenName + "' />").appendTo(container).val(settings.data);

    var arr = data.split(settings.split);
    for (var i = 0; i < arr.length; i++) {
     //创建下拉框
     createSelect(container, arr[i], arr[i + 1] || -1);
    }
   }


   /*
   创建下拉框
   @param container 容器对象
   @param parentid  父ID号
   @param id   自身ID号
   */
   function createSelect(container, parentid, id) {

    //创建select对象,并将select对象放入container内
    var _select = $("<select></select>").appendTo(container).addClass(settings.cssName);

    //如果parentid为空,则_parentid值为0
    var _parentid = parentid || 0;

    //发送AJAX请求,返回的data必须为json格式
    $.getJSON(settings.url, { parentid: _parentid }, function (data) {

     //添加子节点<option>
     addOptions(container, _select, data).val(id || -1)

    });
   }


   /*
   为下拉框添加<option>子节点
   @param container 容器对象
   @param select  下拉框对象
   @param data   子节点数据(要求数据为json格式)
   */
   function addOptions(container, select, data) {

    select.append($('<option value="-1">=请选择=</option>'));

    for (var i = 0; i < data.length; i++) {
     select.append($('<option value="' + data[i][settings.val] + '">' + data[i][settings.text] + '</option>'));
    }

    //为select绑定change事件
    select.bind("change", function () { _onchange(container, $(this), $(this).val()) });

    return select;
   }


   /*
   select的change事件函数
   @param container 容器对象
   @param select  下拉框对象
   @param id   当前下拉框的值
   */
   function _onchange(container, select, id) {

    var nextAll = select.nextAll("select");

    //如果当前select对象的值是空或-1(即:==请选择==),则将其后面的select对象全部移除
    if (!id || id == "-1") {
     nextAll.remove();
    }

    $.getJSON(settings.url, { parentid: id }, function (data) {
     if (data.length > 0) {
      var _html = $("<select class='" + settings.cssName + "'></select>");
      var _select = addOptions(container, _html, data);

      //判断当前select对象后面是否跟有select对象
      if (nextAll.length < 1) {

       select.after(_select); //没有则直接添加

      } else {

       nextAll.remove(); //有则先移除再添加
       select.after(_select);
      }
     }
     else {
      nextAll.remove(); //没有子项则后面的select全部移除
     }




  saveVal(container); //进行数据保存,此方法必须放在回调函数里面
    });





 //saveVal(container); //如果放在这里,则会出现bug

   }


   /*
   将选择的值保存在隐藏域中,用于表单提交保存
   @param container 容器对象
   */
   function saveVal(container) {

    var arr = new Array();
    arr.push(0); //为数组arr添加元素0,父节点从0开始,所以添加0

    $("select", container).each(function () {
     if ($(this).val() > 0) {
      arr.push($(this).val()); //获取container下每个select对象的值,并添加到数组arr
     }
    });

    //为隐藏域对象赋值
    $("input[name='" + settings.hiddenName + "']", container).val(arr.join(settings.split));
   }

  });
 }
})(jQuery);

注释我已经尽量写的详细了,但还是要针对一些知识点进行讲解。

1、我这里后台语言用的是C#,因此你看到的请求路径是这样的(url:"/Handler.ashx"),你用其它语言是没有问题的,但是通过ajax请求返回的数据必须是json格式的数据。

jquery无限级联下拉菜单简单实例演示

2、在初始化方法 init() 中,我们向容器中放入了一个隐藏域,这个隐藏域是用来存值的,我们通过一个 saveVal() 方法为其赋值。之所以要加隐藏域,是因为我们选择的数据最终

是要保存到数据库中的,这样就会有表单提交操作,因此加个隐藏域。

jquery无限级联下拉菜单简单实例演示

3、默认参数设置(settings)里面的split分割符。这里用的是逗号(,) 你也可以改用其它的,比如(-)或者(|)。它主要是用来拆分和组合所有下拉框的值的。

拆分主要是在初始化(init)的时候,比如你给的初始值(data)不是0,而是 0,1,4  这时就会将其拆分,逐一执行创建下拉框方法 createSelect()

组合主要是在给隐藏域赋值的时候,用分割符将各个下拉框的值拼接成一个字符串,然后赋给隐藏域。 

4、默认参数设置(settings)里面的 {val: "id", text: "name" }  。它们对应的是你返回的json对象中对应的属性名。 

5、在_onchange()方法里面有写到saveVal()执行位置的问题。之所以写在回调函数外面会出现bug,是因为$.getJSON()默认是异步的,在回调方法还没执行完时,就执行了

 saveVal()方法。我们来看来bug所在:

jquery无限级联下拉菜单简单实例演示

此时隐藏域的值是错误的,正确的值应该是 0,1,5 。由于回调函数还没执行完,也就是nextAll.remove()这个还没执行的时候,就是执行了saveVal()

DEMO的Html部分的代码:

<html>
<head>
 <title></title>
 <style type="text/css">
  *{margin:0;padding:0;}
  #box{ width:500px; margin:100px auto;}
  .select{ width:120px; height:30px; margin-right:5px;}
 </style>
</head>
<body>
 <!--容器-->
 <div id="box"></div> 
 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script src="Scripts/jquery.similar.cascadingselect.js" type="text/javascript"></script>
 <script type="text/javascript">
  $("#box").CascadingSelect({data:"0,1,4"}); //设置初始值为0,1,4
 </script>
</body>
</html>

以上就是jquery实现无限级联下拉菜单效果的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Extjs中常用表单介绍与应用
Jun 07 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
用JS写一个发布订阅模式
Nov 07 Javascript
手写实现JS中的new
Nov 07 Javascript
jquery实现图片放大镜功能
Nov 23 #Javascript
jquery自定义表格样式
Nov 23 #Javascript
jquery实现表单验证简单实例演示
Nov 23 #Javascript
JavaScript与HTML的结合方法详解
Nov 23 #Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 #Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 #Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 #Javascript
You might like
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
Prototype使用指南之base.js
2007/01/10 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
Node.js事件驱动
2015/06/18 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
python 网络编程详解及简单实例
2017/04/25 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
中秋晚会活动方案
2014/08/31 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
丽江古城导游词
2015/02/03 职场文书
企业承诺书格式范文
2015/04/28 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python