位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享jquery无限级联下拉菜单简单实例演示(jquery width),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery width(),jquery li,jquery noconflict,jquery级联下拉菜单,jquery链接,jquery级联下拉菜单,jquery无限滚动加载数据,jquery无限滚动加载数据,内容如对您有帮助,希望把文章链接给更多的朋友!

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

最终效果图:

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

看下效果图:

1、效果图一:

2、效果图二:

3、效果图三:

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

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

插件的实现代码如下:

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

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

  

2、在初始化方法 init() 中,我们向容器中放入了一个隐藏域,这个隐藏域是用来存值的,我们通过一个 saveVal() 方法为其赋值。之所以要加隐藏域,是因为我们选择的数据最终  是要保存到数据库中的,这样就会有表单提交操作,因此加个隐藏域。

  

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

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

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

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

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

  

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

DEMO的Html部分的代码:

标签: jquery width

本文链接地址:https://www.jiuchutong.com/biancheng/373812.html 转载请保留说明!

上一篇:jquery实现图片放大镜功能(jquery图片放大效果)

下一篇:基于jQuery实现简单的折叠菜单效果(如何用jquery)

  • 年报纳税总额能查到吗
  • 外出经营活动税收管理证明在哪里办理
  • 契税是什么样的单子
  • 抄税 报税 清卡
  • 税收滞纳金调增填哪张表
  • 投资性房地产递延所得税资产怎么算
  • 当月开票当月收款
  • 收到股东投资款怎么做账
  • 小微企业增值税免税政策2023年
  • 开票金额和实际金额不一致
  • 延迟付款确认是怎么回事
  • 企业接受捐赠是营业收入吗
  • 一次性离职补偿个税
  • 红字增值税专用发票信息表能作废吗
  • 年底自查
  • 合同返点提成犯法吗
  • 劳务成本月底有余额吗
  • 公司发放的车补扣个人所得税吗
  • 递延资产主要包括哪些
  • 怎样才能防止臭虫在卧室里呢
  • 长期待摊费用是当月摊销还是次月摊销
  • 苹果系统权限管理在哪找
  • php preg_quote
  • paypal授权书怎么填
  • mac休眠模式
  • macOS 11 Big Sur 开发者预览版Beta 9正式推送
  • PHP:spl_autoload_call()的用法_spl函数
  • 认知度高的人
  • 税控盘维护费全额抵扣分录怎么做
  • 微信小程序使用时间记录查询
  • 购进原材料款项未付应编制什么凭证
  • 6款好用的ppt制作软件推荐
  • 无法收回的应收账款怎么做分录
  • 收到快递赔款分录怎么做
  • 企业应付职工薪酬
  • 免税进项抵扣要做账吗
  • 当月银行账可以下个月做吗
  • 文章初审过了
  • 详解sql基础语法实验报告
  • SQL SERVER 将XML变量转为JSON文本
  • 登记注册车辆登记英语
  • 小规模小于30万之前计提的税金及附加税
  • 异地托收承付结算ppt
  • 企业残障金缴纳标准
  • 深圳市企业稳岗补贴标准
  • 残保金如何做会计分录
  • 货款发票如何入账
  • 现金流量表中应收账款为负是什么意思
  • 事业单位有奖励吗
  • 何为三证合一
  • 公司变更地址后需要做哪些事情
  • 长期股权投资属于什么会计要素
  • 分类不同
  • sql语句的执行方式
  • linux内核模块编译步骤
  • windows的设置
  • macbook os x
  • 系统占用90g怎么删
  • centos7.7安装
  • realmon.exe - realmon是什么进程 有什么用
  • 电脑windows7无法验证此文件
  • window10邮件
  • win7共享文件夹设置访问权限
  • windows 8 key
  • 边做游戏边学
  • shell脚本中的数组
  • k-means聚类算法例题
  • javascript中attribute和property的区别详解
  • 利用python读取文件
  • bash脚本加密
  • pycharm支持python3.9
  • java 调试
  • 夜间模式图
  • unity破解安装教程
  • jquery日期选择器
  • 小规模纳税人进口环节的增值税税率
  • 率土之滨怎么提高建设值上限
  • 汽车购置税网上缴纳流程
  • 济南高新区国家税务局
  • 重庆税务电子发票登录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设