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

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></div> <script src="https://www.jb51.net/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="https://www.jb51.net/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实现无限级联下拉菜单效果的全部内容,希望对大家的学习有所帮助。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzjzd.html