Jquery cxSelect多級(jí)聯(lián)動(dòng)下拉組件的使用

雖然，現(xiàn)在的項(xiàng)目大都不直接使用jquery進(jìn)行開發(fā)了。但是身為后端的我依然遇到了，單體項(xiàng)目，themeleaf模板全棧開發(fā)

下面記錄一下如何使用（文檔這些對(duì)我們這些后端來(lái)說(shuō)不是很友好）

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

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

js直接：

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

2. 級(jí)聯(lián)的select們必須用一個(gè)dom（id可以隨意取）包裹起來(lái)，必須要有class屬性

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

3. 發(fā)請(qǐng)求獲取數(shù)據(jù)，數(shù)據(jù)是json（級(jí)聯(lián)下拉數(shù)據(jù)類似于多層循環(huán)，java中就是對(duì)象套list，list里面的對(duì)象再套list），$(’#element_id’)對(duì)應(yīng)最外層的id屬性值

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

   

   selects數(shù)組中的數(shù)據(jù)，就是select下拉框的class屬性的值，順序很重要，比如數(shù)組第一個(gè)值就對(duì)應(yīng)第一個(gè)下拉框

? jsonSub：子select的list數(shù)據(jù)字段（這里是統(tǒng)一指定，即設(shè)置后每一個(gè)子級(jí)的數(shù)據(jù)字段都叫這個(gè)名字），不指定該屬性，它默認(rèn)會(huì)去找“s”這個(gè)字段

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="">請(qǐng)選擇</option>
                       </select>
   

   data-json-name：指定下拉時(shí)展示的數(shù)據(jù)字段，默認(rèn)找“n”這個(gè)字段

? data-json-value：指定選中時(shí)取哪個(gè)字段作為值

? data-json-sub：如果返回的Json數(shù)據(jù)的子級(jí)下拉數(shù)據(jù)字段不完全同名，可以單獨(dú)為每一個(gè)下拉框指定子級(jí)list字段名

ok