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 JSON的解析方式分享
Apr 05 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
JS如何定义用字符串拼接的变量
Jul 11 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
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
nginx 设置多个站跨域
2021/03/09 Servers
js获取url参数的使用扩展实例
2007/12/29 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
Pytorch中.new()的作用详解
2020/02/18 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
如何通过python检查文件是否被占用
2020/12/18 Python
给分销商的致歉信
2014/01/14 职场文书
调研汇报材料范文
2014/08/17 职场文书
大学生见习报告总结
2014/11/04 职场文书
观后感格式
2015/06/19 职场文书
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS