插件简介

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 联动下拉菜单的更多相关文章

  1. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  2. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  3. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

  4. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  5. js 联动下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

  7. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  8. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

  9. js和jQuery写简单下拉菜单

    1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...

随机推荐

  1. 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 ...

  2. 『Spring.NET+NHibernate+泛型』框架搭建之Model(二)

    依照搭建项目的顺序来比較好描写叙述一些,我一般先搭建实体层,本节内容纯属于NHibernate范畴.先上图和代码,然后对着图和代码逐一解说,以角色表为例:   T_Role表: 数据库表设计非常eas ...

  3. oracle capability i/o(压力測试数据库serveri/o性能)

    今天是2014-04-21,今天简单仅仅说明一下怎么影响重做数据的一个因素,那就是i/o吞吐量,oracle的介质恢复依赖于i/o,假设i/o存在瓶颈,那么势必会影响备库的介质恢复. 那么i/o st ...

  4. 安卓实训第九天---Activity的复习以及在Onstart里设置网络连接

    今天.首先对Activity的生命周期进行复习: (以下的截图部分是借鉴自赵雅智老师的博客.. .) Activity的完整生命周期自第一次调用onCreate()開始.直至调用onDestroy() ...

  5. Java 7 可执行的 Nashorn,取代 Rhino

    惊现有人把 OpenJDK 上的 Nashorn dump 下来,使得 Java 7 都能够使用.源代码在 https://bitbucket.org/ramonza/nashorn-backport ...

  6. [面试题]java中final finally finalized 的差别是什么?

    final 是修饰符,能够用于修饰变量.方法和类.修饰变量时.代表变量不能够改动,也就是常量了.常量须要在定义时赋值或通过构造函数赋值,两者仅仅能选其一:修饰方法时,代表方法仅仅能调用,不能被 ove ...

  7. Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试

    1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的 ...

  8. leetcode排列组合相关

    目录 78/90子集 39/40组合总和 77组合 46/47全排序,同颜色球不相邻的排序方法 78/90子集 输入: [1,2,2] 78输出: [[], [1], [2], [1 2], [2], ...

  9. acc文件的运行

    1.method 1: use "acc" >acc hello.acc world.mc <--- compilation will generate the hel ...

  10. Grafana+Zabbix+Prometheus 监控系统

    环境说明 软件 版本 操作系统 IP地址 Grafana 5.4.3-1 Centos7.5 192.168.18.231 Prometheus 2.6.1 Centos7.5 192.168.18. ...