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();-
写在前面 下拉联动效果是一个老生常谈的问题了，实现方式也是多种多样。最近遇到类似的需求，这里整理一下。 下拉联动实现基于jquery的一款联动下拉菜单插件 jquery-cxselect 功能实现 1、导入脚本 <!-- jQueyr 脚本 --> <script src="/js/jquery.min.js?v=3.6.3"></script> <!-- jQueyr 下拉插件脚本 --> <s
-
<style> .elementor-shortcode { display: none; } #data { display: none; margin-top: 20px; padding: 30px; } .all-box { background-color: #F8
-
省份 城市 地区 调用 cxSelect 时，将使用 get 请求方法，通过data-url属性设定的接口地址，获取省份数据 // _test/province.php [{"value":1,"name":"北京市"},{"value":2,"name":"上海市"},{"value":3,"name":"浙江省"},...] 当选择省份为“浙江省”时，对应的value为3，会在获取城市数据接口
-
在使用jquery.cxselect 级联查询时有时候需要赋值，如果是页面初始化赋值那简单直接在select上data-value=""就行，但如果根据页面选择来赋值，attr("data-value",值)，就不行了。最后看官网，使用api在初始化时获取api $("#regioncascade").cxSelect({}, function(api) { cxSelectApi = ap
-
#jQuery cxSelect cxSelect 是基于 jQuery 的多级联动菜单插件，适用于省市、商品分类等联动菜单。 列表数据通过 AJAX 获取，也可以自定义，数据内容使用 JSON 格式。 同时兼容 Zepto，方便在移动端使用。 国内省市县数据来源：basecss/cityData Date: 2014.03.31 全球主要城市数据来源：整理国内常用网站和软件 Date: 2014
-
第一种方法，使用selectpicker php代码 public function _initialize() { parent::_initialize(); $statusList = [ '0' => __(
-
引擎:thymeleaf 导包： <th:block th:include="include :: jquery-cxselect-js"/> 页面元素： <div id="areaDiv" class="row"> <div class="col-sm-2"> <select name="province" class="province form-control m-b" data-f
-
<div class="form-group row"> <label class="control-label col-xs-12 col-sm-2">{:__('选择房屋')}:</label> <div class="col-xs-12 col-sm-10"> <dl class="fieldlist" data-template="h
-
本文向大家介绍jQuery插件cxSelect多级联动下拉菜单实例解析，包括了jQuery插件cxSelect多级联动下拉菜单实例解析的使用技巧和注意事项，需要的朋友参考一下 随着电商的火爆，这多级联动下拉菜单体现的更加充分，最明显的就是地址的多级联动下拉选择，所以这里就简单的分享一下 jQuery cxSelect 多级联动下拉菜单 cxSelect 是基于 jQuery 的多级联动菜单插件，适
-
本文向大家介绍jQuery插件实现多级联动菜单效果，包括了jQuery插件实现多级联动菜单效果的使用技巧和注意事项，需要的朋友参考一下 开发中，有好多地方用到联动菜单，以前每次遇到联动菜单的时候都去重新写，代码重用率很低，前几天又遇到联动菜单的问题，总结了下，发现可以开发一个联动菜单的功能，以后想用的时候就方便多了。项目中每个页面都有引用jQuery，，开发个jQuery联动菜单插件，说动手就动手
-
本文向大家介绍基于jquery实现多级菜单效果，包括了基于jquery实现多级菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery实现多级菜单效果展示的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍基于Javascript实现二级联动菜单效果，包括了基于Javascript实现二级联动菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Javascript实现二级联动菜单效果的对应代码，具体内容如下 效果图如下： 具体实现步骤如下： 1.所用js代码如下： 2.body中的代码如下： 第二个效果： 1.利用javascript来实现鼠标经过图片放大，鼠标移出图
-
本文向大家介绍基于jquery实现三级下拉菜单，包括了基于jquery实现三级下拉菜单的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery三级下拉菜单的具体实现代码，供大家参考，具体内容如下 在写这个的时候，首先要捋顺思路。点一个菜单的时候，其他的要闭合，点一级菜单的时候，二三级菜单要闭合，等等。 大致代码如下： 如果要添加样式的话，一定要注意，否则菜单可能会出现错误。 完整
-
本文向大家介绍基于jquery实现二级联动效果，包括了基于jquery实现二级联动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery实现二级联动的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件，包括了创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件的使用技巧和注意事项，需要的朋友参考一下 Bootstrap是当下流行的前端UI组件库之一。利用Bootstrap，可以很方便的构造美观、统一的页面。把设计师从具体的UI编码中解放出来。 Bootstrap提供了不少的
-
本文向大家介绍基于jQuery实现二级下拉菜单效果，包括了基于jQuery实现二级下拉菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的，当然还有更为复杂的二级菜单，不过先学会如何制作简单的，分享给大家供大家参考，具体内容如下 代码如下： 希望本文所述对大家学习jquery程序设计有所帮助。