cxSelect 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
cxSelect 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
cxSelect 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
cxSelect 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
cxSelect 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

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();
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2019/09/24 09:31

jquery-cxSelect-联级选择插件-重新赋值

cxSelect初始化时可以试用data-value赋值,产生初始值。 如果需要动态赋值并更新,就需要先给<select>的data-value赋值,再调用attach()接口,意思是重新绑定html。 重新赋值示例如下(省略css): <div class="wrap"> <h1>jQuery cxSelect 多级联动下拉菜单</h1> <h2>示例</h2> <fieldset id="city_china"> <legend>默认</legend> <p>省份:<select class="state" name="state" data-value="...

0
0
发表了博客
2013/07/30 10:58

【军哥谈CI框架】之分享JQuery cxSelect 多级联动菜单插件

本文是继之前发表的【军哥谈CI框架】之JQuery实现全国城市级联菜单的应用的补充和改进。如果你也跟军哥一样,不想做一个固守自封、停滞不前的人,那就一起来学习吧。 PS:相对于上次军哥写这块内容的时候,一开头就情不自禁地让不少人鸡皮疙瘩了一身,这次我就直接多了——直奔主题。(嘿嘿,如果有人不信,不妨去可以看看额~~,访问链接为http://phpersite.sinaapp.com/jayjun/doc/ci/6/cid/13/aid/37.html) 这次的主题是分享...

0
1
发表于大前端专区
2016/10/27 14:25

002-jQuery cxSelect 联动下拉菜单

1、Github 2、中文文档

0
0
发表于大前端专区
2015/03/12 10:59

前端组件

省市区 三级联动 cxselect 表单验证插件 validForm ( 还没去用过 不过看文档简洁的 ) 自动补全 autocomplate 弹窗插件 artdialog 模版引擎 arttemplate 另外强烈推荐 支付宝js项目 arale (seajs 作者玉伯负责) 后期补充 。。。

0
0
发表了博客
2019/08/17 09:50

python-Web-django-时间插件-三级联动

时间插件: 第一步:下载 https://www.layui.com/laydate/ 下载插件包,放在项目的static 第二步:在html里引入js: <script src="/static/laydate/laydate.js"></script> <!-- 时间插件 --> 引入标签: <input type="text" placeholder="请选择日期" id="test1" name="time"> 引入js块: <script> //执行一个laydate实例 laydate.render({ elem: '#test1', //指定元素 type: 'datetime' }); </scri...

0
0
发表于大前端专区
2016/11/16 12:11

【未使用过】说明文档

Markdown 简介 http://sspai.com/25137 require 中文网 http://www.requirejs.cn/ node.js module初步理解 http://www.cnblogs.com/dolphinX/p/3485260.html 移动web资源整理 http://www.cnblogs.com/PeunZhang/p/3407453.html#question_2 pageResponse - 让H5适配移动设备全家(移动端适配) http://www.cnblogs.com/PeunZhang/p/4517864.html 进度事件(Progress Events) https://www.w3cmm.com/ajax/progress-events.html 拖动滑...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
10 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部