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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
javascript操作css属性
2013/12/30 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
python自动翻译实现方法
2016/05/28 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
python中hashlib模块用法示例
2017/10/30 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
如何基于python实现脚本加密
2019/12/28 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
Python同时迭代多个序列的方法
2020/07/28 Python
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
计算机专业个人简短的自我评价
2013/10/23 职场文书
工作疏忽检讨书
2014/01/25 职场文书
信息技术教学反思
2014/02/12 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
春节超市活动方案
2014/08/14 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python