jQuery cxSelect 联动下拉菜单
插件简介
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 联动下拉菜单的更多相关文章
- jQuery cxSelect 多级联动下拉菜单
随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...
- (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类: 前端技术 ...
- jquery实现多级下拉菜单
支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- js 联动下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- php+ajax的三级联动下拉菜单
封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...
- ajax三级联动下拉菜单
ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...
- jQuery+Superfish制作下拉菜单
superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...
- js和jQuery写简单下拉菜单
1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...
随机推荐
- cocos2d-x andriod, Box2D.h: No such file or directory
原文链接:r=47980">http://www.cocos2d-x.org/forums/6/topics/47503? r=47980 You need to include li ...
- 『Spring.NET+NHibernate+泛型』框架搭建之Model(二)
依照搭建项目的顺序来比較好描写叙述一些,我一般先搭建实体层,本节内容纯属于NHibernate范畴.先上图和代码,然后对着图和代码逐一解说,以角色表为例: T_Role表: 数据库表设计非常eas ...
- oracle capability i/o(压力測试数据库serveri/o性能)
今天是2014-04-21,今天简单仅仅说明一下怎么影响重做数据的一个因素,那就是i/o吞吐量,oracle的介质恢复依赖于i/o,假设i/o存在瓶颈,那么势必会影响备库的介质恢复. 那么i/o st ...
- 安卓实训第九天---Activity的复习以及在Onstart里设置网络连接
今天.首先对Activity的生命周期进行复习: (以下的截图部分是借鉴自赵雅智老师的博客.. .) Activity的完整生命周期自第一次调用onCreate()開始.直至调用onDestroy() ...
- Java 7 可执行的 Nashorn,取代 Rhino
惊现有人把 OpenJDK 上的 Nashorn dump 下来,使得 Java 7 都能够使用.源代码在 https://bitbucket.org/ramonza/nashorn-backport ...
- [面试题]java中final finally finalized 的差别是什么?
final 是修饰符,能够用于修饰变量.方法和类.修饰变量时.代表变量不能够改动,也就是常量了.常量须要在定义时赋值或通过构造函数赋值,两者仅仅能选其一:修饰方法时,代表方法仅仅能调用,不能被 ove ...
- Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试
1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的 ...
- leetcode排列组合相关
目录 78/90子集 39/40组合总和 77组合 46/47全排序,同颜色球不相邻的排序方法 78/90子集 输入: [1,2,2] 78输出: [[], [1], [2], [1 2], [2], ...
- acc文件的运行
1.method 1: use "acc" >acc hello.acc world.mc <--- compilation will generate the hel ...
- Grafana+Zabbix+Prometheus 监控系统
环境说明 软件 版本 操作系统 IP地址 Grafana 5.4.3-1 Centos7.5 192.168.18.231 Prometheus 2.6.1 Centos7.5 192.168.18. ...