jQuery cxSelect 多級聯動下拉菜單

http://www.jq22.com/jquery-info3238

插件描述：cxSelect 是基於 jQuery 的多級聯動菜單插件，適用於省市、商品分類等聯動菜單。 列表數據通過 AJAX 獲取（需要在服務器環境運行），也可以使用變量自定義，數據內容使用 JSON 格式。

載入 JavaScript 文件

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

HTML代碼

<!-- 
select 必須放在元素 id="element_id" 的內部，不限層級 
select 的 class 任意取值，也可以附加多個 class，如 class="province otherclass"，在調用時只需要輸入其中一個即可，但是不能重復 
如需設置 select 默認值，加上 data-value 屬性，例：<select class="province" data-value="浙江省"></select> 
--> 
<div id="element_id"> 
  <select class="province"></select> 
  <select class="city"></select> 
  <select class="area"></select> 
</div> 

調用 cxSelect

// selects 為數組形式，請注意順序 
$('#element_id').cxSelect({ 
  url: 'cityData.min.json'   // 提示：如果服務器不支持 .json 類型文件，請將文件改為 .js 文件 
  selects: ['province', 'city', 'area'], 
  nodata: 'none' 
});

可設置全局默認值

// 需在引入 <script src="jquery.cxselect.js"></script> 之后，調用之前設置 
$.cxSelect.defaults.url = 'cityData.min.json'; 
$.cxSelect.defaults.nodata = 'none'; 

參數說明

selects	[]	下拉選框組。輸入 select 的 className
url	null	列表數據文件路徑（URL） | 對象（值為 JSON 的結構，參照自定義數據結構）
nodata	null	子集無數據時 select 的狀態。可設置為："none"(display:none), "hidden"(visibility:hidden)
required	false	是否為必選。設為 flase 時，會在列表頭部添加 <option value="0">請選擇</option> 選項。
firstTitle	'請選擇'	選框第一個項目的標題。如果要定義每個選框的第一個項目標題，可以通過 <select> 的 data-first-title 屬性來設置。（僅在 required 為 false 時有效）
firstValue	'0'	選框第一個項目的值。如果要定義每個選框的第一個項目值，可以通過 <select> 的 data-first-value 屬性來設置。（僅在 required 為 false 時有效）

data 屬性參數

 

在父元素上的 data- 屬性

<div id="element_id" data-url="cityData.min.json" data-required="true"></select>

 

 

data-url	列表數據文件路徑（此處只能設置路徑，自定義需要在參數中設置）
data-nodata	子集無數據時 select 的狀態。
data-required	是否為必選。
data-first-title	所有下拉框的第一個項目的標題
data-first-value	所有下拉框的第一個項目的值

 

在<select>元素上的 data- 屬性

<select class="province" data-value="浙江省" data-first-title="選擇省"></select>

data-value	默認值
data-first-title	第一個項目的標題
data-first-value	第一個項目的值

 

 

數據 JSON 結構

 

v	string | number	設置 option 的值（可選項，未設置則使用 n）
n	string	設置 option 的文本
s	array	當前選項的子集

自定義數據結構

/* 使用 JSON 格式 
 * v: 設置 option 的值（可選項，未設置則使用 n） 
 * n: 設置 option 的文本 
 * s: 當前選項的子集 
 */ 
[ 
  {'v': '1', 'n': 'A'}, 
  {'v': '2', 'n': 'B', 's': [ 
    {'v': '3', 'n': 'Banana'}, 
    {'v': '4', 'n': 'Blue'}, 
    {'v': '5', 'n': 'Bus'} 
  ]}, 
  {'v': '6', 'n': 'C'}, 
  {'v': '7', 'n': 'D', 's': [ 
    {'v': '8', 'n': 'day'}, 
    {'v': '9', 'n': 'del'} 
  ]} 
]