jQuery cxSelect 聯動下拉菜單
阿新 • • 發佈:2018-11-17
.com 服務 ble head name options 多級聯動 全局 sel
插件簡介
cxSelect 是基於 jQuery 的多級聯動菜單插件,適用於省市、商品分類等聯動菜單。
列表數據通過 AJAX 獲取,也可以自定義,數據內容使用 JSON 格式。
同時兼容 Zepto,方便在移動端使用。
國內省市縣數據來源:basecss/cityData
下載及演示
演示地址:http://www.jqhtml.com/wp-content/uploads/2017/05/wz/jQuery.cxSelect-1.4.1/
下載地址:在線下載
使用方法
載入 JavaScript 文件
<script src="jquery.js"></script> <script src="jquery.cxselect.js"></script>
DOM 結構
<!-- select 必須放在元素 id="element_id" 的內部,不限層級 select 的 class 任意取值,也可以附加多個 class,如 class="province otherclass",在調用時只需要輸入其中一個即可,但是不能重復 --> <div id="element_id"> <select class="province"></select> <select class="city"></select> <select class="area"></select> </div>
設置默認值
<!-- 方法一:使用 option 的 value 和 selected 屬性 --> <select class="province"> <option value="浙江省" selected>浙江省</option> </select> <!-- 方法二:使用 select 的 data-value 屬性 --> <select class="province" data-value="浙江省"></select>
調用 cxSelect
$('#element_id').cxSelect({
url: 'cityData.min.json', // 如果服務器不支持 .json 類型文件,請將文件改為 .js 文件
selects: ['province', 'city', 'area'], // 數組,請註意順序
emptyStyle: 'none'
});
設置參數全局默認值
// 需在引入 <script src="jquery.cxselect.js"></script> 之後,調用之前設置
$.cxSelect.defaults.url = 'cityData.min.json';
$.cxSelect.defaults.emptyStyle = 'none';
參數說明
名稱 | 默認值 | 說明 |
---|---|---|
selects | [] | 下拉選框組。輸入 select 的 className |
url | null |
整合列表數據接口地址(URL) 每個選框的內容使用各自的接口地址,詳見 [DEMO] |
data | null | 自定義數據,類型為數組,數據使用 JSON 格式。[DEMO] |
emptyStyle | null | 子集無數據時 select 的狀態。可設置為:"none"(display:none), "hidden"(visibility:hidden) |
required | false | 是否為必選。設為 false 時,會在列表頭部添加 <option value="firstValue">firstTitle</option> 選項。 |
firstTitle | ‘請選擇‘ | 選框第一個項目的標題(僅在 required 為 false 時有效) |
firstValue | ‘‘ | 選框第一個項目的值(僅在 required 為 false 時有效) |
jsonSpace | ‘‘ | 數據命名空間 |
jsonName | ‘n‘ | 數據標題字段名稱(用於 option 的標題) |
jsonValue | ‘‘ | 數據值字段名稱(用於 option 的 value,沒有值字段時使用標題作為 value) |
jsonSub | ‘s‘ | 子集數據字段名稱 |
data 屬性參數
在父元素上的data-
屬性
<div id="element_id" data-url="cityData.min.json" data-selects="province,city,area" data-required="true"></div>
名稱 | 說明 |
---|---|
data-selects | 下拉選框組。輸入 select 的 className,使用英文逗號分隔的字符串 |
data-url | 列表數據接口地址(此處只能設置 URL,自定義需要在參數中設置) |
data-empty-style | 子集無數據時 select 的狀態 |
data-required | 是否為必選 |
data-first-title | 選框第一個項目的標題 |
data-first-value | 選框第一個項目的值 |
data-json-space | 數據命名空間 |
data-json-name | 數據標題字段名稱 |
data-json-value | 數據值字段名稱 |
data-json-sub | 子集數據字段名稱 |
在 select
元素上的 data-
屬性
<select class="province" data-value="浙江省" data-required="false" data-first-title="選擇省"></select>
名稱 | 說明 |
---|---|
data-value | 默認選中值 |
data-url | 列表數據接口地址 |
data-required | 是否為必選 |
data-query-name | 傳遞上一個選框值的參數名稱(默認使用上一個選框的 name 屬性值) |
data-first-title | 選框第一個項目的標題 |
data-first-value | 選框第一個項目的值 |
data-json-space | 數據命名空間 |
data-json-name | 數據標題字段名稱 |
data-json-value | 數據值字段名稱 |
API 接口
var cxSelectApi;
// 方法一:
cxSelectApi = $.cxSelect($('#element_id'), {
selects: ['province', 'city', 'area']
});
// 方法二:
$('#element_id').cxSelect({
selects: ['province', 'city', 'area']
}, function(api) {
cxSelectApi = api;
});
名稱 | 說明 |
---|---|
attach() | 綁定 調用時會自動進行綁定,用於使用detach解除綁定後,進行重新綁定。 |
detach() | 解除綁定 解除綁定後,不再具有聯動效果。 |
clear(index) | 清空選項 清空第 index 個 select 自身及之後的 select 的選項。 index: select 的序號,從 0 開始。 |
setOptions(settings) | 重新設置參數
settings: 與調用時參數一致。 |
原文地址:http://code.ciaoca.com/jquery/cxSelect/
jQuery cxSelect 聯動下拉菜單