jQuery cxSelect

cxSelect是一款基于jQuery的多级联动菜单插件,适用于省市、商品分类等联动菜单场景。支持通过AJAX获取数据或使用自定义JSON数据,并提供丰富的配置选项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原文地址:https://github.com/ciaoca/cxSelect

cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。

列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式。

国内省市县数据来源:basecss/cityData Date: 2014.03.31

全球主要城市数据来源:整理国内常用网站和软件 Date: 2014.07.29

版本:

  • jQuery v1.7+
  • jQuery cxSelect v1.3.3

文档:http://code.ciaoca.com/jquery/cxselect/

示例:http://code.ciaoca.com/jquery/cxselect/demo/

使用方法

载入 JavaScript 文件

<script src="jquery.js"></script>
<script src="jquery.cxselect.js"></script>

DOM 结构

<!--
select 必须放在元素 id="element_id" 的内部,不限层级
select 的 class 任意取值,也可以附加多个 class,如 class="province otherclass",在调用时只需要输入其中一个即可,但是不能重复
如需设置 select 默认值,加上 data-value 属性,例:<select class="province" data-value="浙江省"></select>
-->
<div id="element_id">
    <select class="province"></select>
    <select class="city"></select>
    <select class="area"></select>
</div>

调用 cxSelect

// selects 为数组形式,请注意顺序
$('#element_id').cxSelect({
    selects: ['province', 'city', 'area'],
    nodata: 'none'
});

// 设置全局默认值,需在引入 <script src="jquery.cxselect.js"></script> 之后,调用之前设置
$.cxSelect.defaults.url = 'cityData.min.json'; // 提示:如果服务器不支持 .json 类型文件,请将文件改为 .js 文件
$.cxSelect.defaults.nodata = 'none';

参数说明

名称默认值说明
selects[]下拉选框组。输入 select 的 className
urlnull列表数据文件路径(URL) | 对象(值为 JSON 的结构,参照自定义数据结构)
nodatanull子集无数据时 select 的状态。可设置为:"none"(display:none), "hidden"(visibility:hidden)
requiredfalse是否为必选。设为 flase 时,会在列表头部添加 请选择 选项。
firstTitle'请选择'选框第一个项目的标题。如果要定义每个选框的第一个项目标题,可以通过 的 data-first-title 属性来设置。(仅在 required 为 false 时有效)
firstValue'0'选框第一个项目的值。如果要定义每个选框的第一个项目值,可以通过 的 data-first-value 属性来设置。(仅在 required 为 false 时有效)

data 属性参数

在父元素上的 data- 属性

名称说明
data-url列表数据文件路径(此处只能设置路径,自定义需要在参数中设置)
data-nodata子集无数据时 select 的状态。
data-first-required是否为必选
data-first-title所有下拉框的第一个项目的标题
data-first-value所有下拉框的第一个项目的值

在 <select> 上的 data- 属性

名称说明
data-value默认值
data-first-title第一个项目的标题
data-first-value第一个项目的值

数据 JSON 结构

名称类型说明
vstring | number设置 option 的值(可选项,未设置则使用 n)
nstring设置 option 的文本
sarray当前选项的子集

自定义数据结构

/* 使用 JSON 格式
 * v: 设置 option 的值(可选项,未设置则使用 n)
 * n: 设置 option 的文本
 * s: 当前选项的子集
 */
[
    {"v": "1", "n": "A"},
    {"v": "2", "n": "B", "s": [
        {"v": "3", "n": "Banana"},
        {"v": "4", "n": "Blue"},
        {"v": "5", "n": "Bus"}
    ]},
    {"v": "6", "n": "C"},
    {"v": "7", "n": "D", "s": [
        {"v": "8", "n": "day"},
        {"v": "9", "n": "del"}
    ]}
]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值