位置: 编程技术 - 正文
jquery无限级联下拉菜单简单实例演示(jquery width)
编辑：rootadmin推荐整理分享jquery无限级联下拉菜单简单实例演示(jquery width)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery width(),jquery li,jquery noconflict,jquery级联下拉菜单,jquery链接,jquery级联下拉菜单,jquery无限滚动加载数据,jquery无限滚动加载数据,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路。分享给大家供大家参考。具体如下：
最终效果图：
因为是级联，所以数据必须是树型结构的，这里的测试数据如下：
看下效果图：
1、效果图一：
2、效果图二：
3、效果图三：
由图可知，下拉框的个数并不是写死的，而是动态加载的。每当下拉框选择改变的时候，会发送一次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)
