Jquery cxSelect多級聯動下拉組件的使用

雖然，現在的項目大都不直接使用jquery進行開發了。但是身為后端的我依然遇到了，單體項目，themeleaf模板全棧開發

下面記錄一下如何使用（文檔這些對我們這些后端來說不是很友好）

1. 首先頁面中要引入它的js（我這里是themeleaf）

<th:block th:include="include :: jquery-cxselect-js" />

js直接：

<script src="jquery.js"></script>
<script src="jquery.cxselect.js"></script>

2. 級聯的select們必須用一個dom（id可以隨意取）包裹起來，必須要有class屬性

<!--
select 必須放在元素 id="element_id" 的內部，不限層級
select 的 class 任意取值，也可以附加多個 class，如 class="province otherclass"，在調用時只需要輸入其中一個即可，但是不能重復
-->
<div id="element_id">
  <select class="curriculum"></select>
  <select class="chapter"></select>
</div>

3. 發請求獲取數據，數據是json（級聯下拉數據類似于多層循環，java中就是對象套list，list里面的對象再套list），$(’#element_id’)對應最外層的id屬性值

   // 通過默認url獲取
   var urlSelect = 'selectdata';
   //設置請求路徑
   $.cxSelect.defaults.url = urlSelect;
   $('#element_id').cxSelect({
       selects: ['curriculum', 'chapter'],
       nodata: 'none',
       jsonSub: 'chapterList'
   });
   

   

   selects數組中的數據，就是select下拉框的class屬性的值，順序很重要，比如數組第一個值就對應第一個下拉框

? jsonSub：子select的list數據字段（這里是統一指定，即設置后每一個子級的數據字段都叫這個名字），不指定該屬性，它默認會去找“s”這個字段

4. 需要注意的是，下拉框我們希望瀏覽name，選擇id

   <select class="curriculum" name="curriculumId" data-json-name="name" data-json-sub="chapterList" data-json-value="id" data-first-title="所屬課程">
                           <option value="">請選擇</option>
                       </select>
   

   data-json-name：指定下拉時展示的數據字段，默認找“n”這個字段

? data-json-value：指定選中時取哪個字段作為值

? data-json-sub：如果返回的Json數據的子級下拉數據字段不完全同名，可以單獨為每一個下拉框指定子級list字段名

ok