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要放到頁面底部。
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