一、前言
关于这个插件，以前是分享过一次的，奈何在这次的使用中又一次的遇到了不少坑，而且上次分享也少了js下载的步骤，所以这次补齐一下吧。可能有人会觉得不就是四层联动嘛，框架里面都带的有，可是老铁啊，我们的项目没前端框架，依然是jquery的天下。。
二、引入步骤
在引入之前，本来是打算生成json结构的，但是由于字符串比较长，四层字符串一共接近200W数据，生成的json文件也比较大，不是很方便。选用链接按需请求会好点，每次临时加载即可。不过速度也快的有限，实测每个请求需要0.6-0.8s左右，对PC端还算是可以接受的。毕竟初始化的时候只用请求一次即可。
1、引入JS
关于这个jquerySelect.js，网上是有一个教程的，不过博主按照那个教程来配置，发现没有成功，而且和我们的需求也不大符合，所以就果断选用旧的JS了，这里提供的步骤也是旧的JS的步骤。
链接: https://pan.baidu.com/s/1nNJCW1ocdU6yIClrbSWg8Q 提取码: jxwj 复制这段内容后打开百度网盘手机App，操作更方便哦
2、旧的js问题
关于旧的JS，基本可以参考博主以前分享的那篇文章。不过这个js插件有个问题，就是刷新页面都会重置。比如我们进行了form表单的提交，等查询出来数据了，发现条件都没有保持住，这是何等的卧槽啊，何况是四层联动，鬼知道上次选的都是啥。。
不过这部分博主已经通过自己蹩脚的JS水平给修复了，就在源码的348行部分，整个源码上都有不少注释，感兴趣的朋友可以自己改改试试。
3、HTML代码和JS代码
<div class="form-group" id="tracker_name">
<select class="aaa" name="aaa" id="aaa" data-url="xxx" data-first-title="aaa" data-first-value=""></select>
<select class="bbb" name="bbb" id="bbb" data-url="xxx" data-first-title="bbb" data-first-value="" data-json-name="name" data-json-value="value" disabled=""></select>
<select class="cccc" name="ccc" id="ccc" data-url="xxx" data-first-title="ccc" data-first-value="" data-json-name="name" data-json-value="value" disabled=""></select>
<select class="ddd" name="ddd" id="ddd" data-url="xxx" data-first-title="ddd" data-first-value="" data-json-name="name" data-json-value="value" disabled=""></select>
</div>
JS代码：
<script>
$("#tracker_name").cxSelect({
selects : ["aaa","bbb","ccc","ddd"],
jsonName: 'name', //和select中的json-name的值对应
jsonValue: 'value',
nodata: 'none' //查询没值的话则不显示
});
</script>
注意：
1、js要放到页面底部。
2、class部分一定要和js中的selects对应，js中取的是class的值
3、链接如果查询失败的话，页面会直接跳转到接口页面。如果出现这种情况了，一定是链接的问题
4、查询的url接口一定要注意sql优化等，尽量提升查询速度。博主这边没有索引的时候，查一个需要6s多，无法接受。加上索引之后，0.6s即可
4、各个参数的用法
大家可以看到这里的select标签里面有不少的属性，下面大概列一下各个属性已经对应的含义：
| 属性名称 | 含义 |
|---|---|
| data-required = true | 一开始就把所有选项都显示出来 |
| date-first-title=“xxx” | 初始化显示的标题 |
| data-first-value="" | 初始化显示标题对应的值 |
| data-json-name="" | 返回json的name名称(和js对应) |
| data-json-value="" | 返回json的值名称（和js对应） |
最后，临近年关，无心工作了各位~~~奥利给！
end
