jquery的四层联动插件jquerySelect

一、前言

      关于这个插件,以前是分享过一次的,奈何在这次的使用中又一次的遇到了不少坑,而且上次分享也少了js下载的步骤,所以这次补齐一下吧。可能有人会觉得不就是四层联动嘛,框架里面都带的有,可是老铁啊,我们的项目没前端框架,依然是jquery的天下。。

多级联动下拉菜单插件:jquery.cxselect.js

二、引入步骤

      在引入之前,本来是打算生成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>&nbsp;
            <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>&nbsp;
            <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>&nbsp;
            <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要放到页面底部。
2class部分一定要和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

发布了361 篇原创文章 · 获赞 1475 · 访问量 142万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览