jQuery cxSelect
来源:互联网 发布:法律是道德的底线知乎 编辑:程序博客网 时间:2024/05/20 19:50
原文地址:https://github.com/ciaoca/cxSelect
cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。
列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式。
国内省市县数据来源:basecss/cityData Date: 2014.03.31
全球主要城市数据来源:整理国内常用网站和软件 Date: 2014.07.29
版本:
- jQuery v1.7+
- jQuery cxSelect v1.3.3
文档:http://code.ciaoca.com/jquery/cxselect/
示例:http://code.ciaoca.com/jquery/cxselect/demo/
使用方法
载入 JavaScript 文件
<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>
调用 cxSelect
// selects 为数组形式,请注意顺序$('#element_id').cxSelect({ selects: ['province', 'city', 'area'], nodata: 'none'});// 设置全局默认值,需在引入 <script src="jquery.cxselect.js"></script> 之后,调用之前设置$.cxSelect.defaults.url = 'cityData.min.json'; // 提示:如果服务器不支持 .json 类型文件,请将文件改为 .js 文件$.cxSelect.defaults.nodata = 'none';
参数说明
data 属性参数
在父元素上的 data- 属性
在 <select> 上的 data- 属性
数据 JSON 结构
自定义数据结构
/* 使用 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"} ]}]
0 0
- jQuery cxSelect
- JQuery cxSelect联动下拉菜单
- jQuery cxSelect 多级联动下拉菜单
- jQuery cxSelect 多级联动下拉菜单
- jQuery cxSelect 多级联动下拉菜单
- jQuery cxSelect 联动下拉菜单 城市联动
- select下拉联动 (Bootstrap、JQuery插件之cxselect)
- 多级联动下拉菜单插件:jquery.cxselect.js
- jquery.cxselect.js的使用案例 (动态数据的三级联动)
- 2、jQuery插件之cxSelect城市选择(三级级联效果国际版和国内版)
- Laravel应用简单好用的多级联动插件cxSelect
- cxselect联动下拉菜单 所需数据格式封住
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- MFC程序(c++)之搜索所有文件和文件夹
- ZYBO EDK工程建立之Board Definition File
- 安装svn后 桌面图标突然变出蓝色问号解决方法
- Android项目中引用到其他工程
- 关于__int64
- jQuery cxSelect
- 安装bash-completion,git的tab补全
- C++中的const用法
- 【传递正能量】献给那些正在试用期或实习期的人
- Android开发环境搭建
- Python标准库:内置函数dir([object])
- strcpy源码解说
- 在ListCtrl中插入图标(I)
- xcode debug模式和release模式的设置