首页 前端知识 【技术】基于 jquery-cxselect 实现下拉联动效果

【技术】基于 jquery-cxselect 实现下拉联动效果

2024-05-12 00:05:34 前端知识 前端哥 874 826 我要收藏

基于 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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/8197.html
标签
评论
发布的文章

JSON三种数据解析方法

2024-05-22 09:05:13

使用nvm管理(切换)node版本

2024-05-22 09:05:48

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!