位置: 编程技术 - 正文

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)

  • 税控服务费全额抵扣增值税申报表中哪一栏
  • 以前年度损益调整科目怎么用
  • 企业购买雇主责任险会计分录
  • 预缴的附加税月末结转吗
  • 员工在公司食堂就餐被烫伤医药费由谁承担
  • 度假村功能
  • 土地增值税清算的条件
  • 音乐茶座取什么名字好呢
  • 代理记账服务内容
  • 税务顾问费怎么做账务处理?
  • 以前年度损益调整属于哪类科目
  • 员工私人车通行费能抵进项税吗
  • 发票报销的补助是否缴纳个人所得税?
  • 火车票抵扣进项税需要认证吗
  • 金蝶哪个版本最好
  • 大额转账人行审核通过
  • 中国电信服务
  • 电脑美式键盘怎么设置
  • flash设置旋转
  • bios里硬盘是哪个
  • 因质量问题退货和收回的药品应当
  • 销售合作分成会计分录
  • 存货损失进项税
  • 无法收回的分公司怎么办
  • 每月分配利润如何做账
  • php连接数据表
  • 企业可以超范围经营吗
  • 企业法人个人贷款企业有风险吗
  • html怎么引入图片
  • 公民什么情况纳税
  • 营改增后预交增值税
  • php中的pdo
  • 聊聊vue3的defineProps、defineEmits、defineExpose
  • 人工智能的几个发展阶段
  • 企业购进的商品是什么
  • iframe嵌套页面点击里面的按钮
  • od输出结构
  • 会计做账需要银行交易明细吗
  • 退还多缴纳税款
  • 定额发票需要交契税吗
  • 转让全部探明矿权合法吗
  • 农村合作社不报税会导致经营异常吗
  • 2022最新款带采集功能抖音壁纸小程序源码
  • phpcms二次开发教程
  • 佣金代扣代缴增值税如何计算
  • 国际货运操作流程图
  • 差旅费报销范文
  • 印花税购销合同包括哪些
  • 集团与子公司资产的区别
  • 企业所得税视同销售的会计处理是?
  • 增值税附加税需要写进合同吗
  • 公司既没有收入怎么办
  • 未开票收入如何记账
  • 特别提款权和普通提款权的区别
  • 工程物资盘盈为什么冲减在建工程
  • 关于数据库连接池,下列说法错误的是
  • sql server索引怎么用
  • sql替换快捷键
  • mysql输入中文显示乱码
  • linux的sh
  • macbookair如何删除
  • WIN10系统中软件打开找不到网络共享盘
  • linux unhide
  • win8任务管理器灰色
  • android 开发环境
  • html td 合并
  • linux的open
  • 批处理解约瑟夫环应用题代码
  • unity 求角度
  • nodejs遍历json数据
  • python 转义字符处理
  • js表单事件有哪些
  • js移动端拖拽
  • javascript如何学
  • js 严格的迭代语句
  • python按行读取文本并输出到excel
  • 豪车超过多少钱要多加税
  • 甲供材备案需要的资料
  • 纳税人的种类包括
  • 税收负担与税负转嫁
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设