cxSelect 是基于 jQuery 的多级联动菜单插件，

cxSelect 是基于 jQuery 的多级联动菜单插件，适用于省市、商品分类等联动菜单。

列表数据通过 AJAX 获取，也可以自定义，数据内容使用 JSON 格式。

同时兼容 Zepto，方便在移动端使用。

版本：

Demo: http://ciaoca.github.io/cxSelect/

<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 属性 当同时设置 option 的 value 和 select 的 data-value 时，优先使用 data-value 的值 --> <select class="province" data-value="浙江省"></select> 调用 cxSelect

$('#element_id').cxSelect({ url: 'cityData.min.json', selects: ['province', 'city', 'area'], // selects 为数组形式，请注意顺序 emptyStyle: 'none' }); 设置参数全局默认值

$.cxSelect.defaults.url = 'cityData.min.json'; $.cxSelect.defaults.emptyStyle = 'none'; 参数说明

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

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

var cxSelectApi; // 方法一： cxSelectApi = $.cxSelect($('#element_id'), { selects: ['province', 'city', 'area'] }); // 方法二： $('#element_id').cxSelect({ selects: ['province', 'city', 'area'] }, function(api) { cxSelectApi = api; }); cxSelectApi.attach(); cxSelectApi.detach(); cxSelectApi.clear(); cxSelectApi.setOptions();

可以使用任何类型的数据作为值，但最终都会被转化为文本。

可以为每个select设置一个接口，根据接口返回的数据结构，设置json-space、json-name、json-value适应 JSON 结构。 当页面加载时，第一个选框已有选项数据，可以不设置第一个选框的接口。

独立接口示例

cityData.json

国内城市数据来源：2019年中华人民共和国行政区划代码（截止2019年12月31日）

cityData-simple.json

国内城市简称版本 不包含：

一级 省、市、区 二级 市、区、县、盟、州

globalData.json

全球主要城市数据来源：整理国内常用网站和软件 Date: 2014.07.29