因为是级联,所以数据必须是树型结构的,这里的测试数据如下:
看下效果图:
1、效果图一:
2、效果图二:
3、效果图三:
由图可知,下拉框的个数并不是写死的,而是动态加载的。每当下拉框选择改变的时候,会发送一次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部分的代码: