jQuery cxSelect 聯動下拉菜單 城市聯動

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

二、兼容情況如圖

三、調用

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

四、DOM結構

<!-- 
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> 

五、設置全局默認值

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

六、調用

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