基于 jquery-cxselect 实现下拉联动效果
- 写在前面
- 功能实现
- 1、导入脚本
- 2、编写页面组件
- 3、JSON 数据准备
- 4、脚本编写
写在前面
下拉联动效果是一个老生常谈的问题了,实现方式也是多种多样。最近遇到类似的需求,这里整理一下。
下拉联动实现基于jquery的一款联动下拉菜单插件 jquery-cxselect
功能实现
1、导入脚本
<!-- jQueyr 脚本 -->
<script src="/js/jquery.min.js?v=3.6.3"></script>
<!-- jQueyr 下拉插件脚本 -->
<script src="/jsjquery.cxselect.min.js?v=1.4.2"></script>
2、编写页面组件
页面组件布局使用的是 BootStrap。
注意:div 组件的 id 属性,后面脚本会用到
<div class="form-group" id="pca">
<label class="col-sm-2 control-label is-required">省市县:</label>
<div class="col-sm-3">
<!-- data-value 可以设置下拉框的默认选择值 -->
<select name="province" class="province form-control m-b" required data-value=""></select>
</div>
<div class="col-sm-3">
<select name="city" class="city form-control m-b" required data-value=""></select>
</div>
<div class="col-sm-3">
<select name="area" class="area form-control m-b" required data-value=""></select>
</div>
<div class="col-sm-3 col-sm-offset-2">
<select name="street" class="street form-control m-b" required data-value=""></select>
</div>
</div>
3、JSON 数据准备
这里准备了一个JSON文件 ,点击连接直接下载放到项目中即可。下面罗列一部分摘要。
[
{
"code": "11",
"name": "北京市",
"children" : [
{
"code" : "1101",
"name" : "市辖区",
"children" : [
{
"code" : "110101",
"name" : "东城区" ,
"children" : [
{
"code" : "110101001",
"name" : "东华门街道"
},
{
"code" : "110101002",
"name" : "景山街道"
},
]
}
]
}
]
}
]
4、脚本编写
<script th:inline="javascript">
/* 读取 json 文件,转换为 JSON 数组,方便遍历 */
$.getJSON('/pcas-code.json', function(data){
// 基于 ID 选择器,选择级联组件的父容器,调用插件的 cxSelect 方法,传递参数。
$('#pca').cxSelect({
// 选择联动组件,以 class 选择器选择
selects: ['province', 'city', 'area', 'street'],
// 是否为必选
required: false,
// 从 JSON 数据中获取指定 key 的值,给 option 标签的 value 赋值
jsonValue: 'code',
// 从 JSON 数据中获取指定 key 的值,给 option 选项赋值
jsonName: 'name',
// 从 JSON 数据中获取指定 key 的值,获取联动的子数据
jsonSub: 'children',
data: data,
});
});
</script>