cxSelect基于 jQuery 的多级联动菜单插件
cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。
列表数据通过 AJAX 获取,也可以自定义,数据内容使用 JSON 格式。
同时兼容 Zepto,方便在移动端使用。
国内省市县数据来源:basecss/cityData Date: 2014.03.31
全球主要城市数据来源:整理国内常用网站和软件 Date: 2014.07.29
版本:
jQuery v1.7+ | Zepto v1.0+
jQuery cxSelect v1.4.2
使用方法
载入 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 属性 当同时设置 option 的 value 和 select 的 data-value 时,优先使用 data-value 的值 --> <select class="province" data-value="浙江省"></select>
调用 cxSelect
$('#element_id').cxSelect({ url: 'cityData.min.json' // 提示:如果服务器不支持 .json 类型文件,请将文件改为 .js 文件 selects: ['province', 'city', 'area'], // selects 为数组形式,请注意顺序 emptyStyle: 'none' });
设置参数全局默认值
// 需在引入 <script src="jquery.cxselect.js"></script> 之后,调用之前设置 $.cxSelect.defaults.url = 'cityData.min.json'; $.cxSelect.defaults.emptyStyle = 'none';
API 接口
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();
评论