日拱一卒无有尽,功不唐捐终入海

jQuery cxSelect 省市多级联动下拉菜单

JS类库 Sam 822℃ 0评论

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

列表数据通过 AJAX 获取,也可以自定义,数据内容使用 JSON 格式。

同时兼容 Zepto,方便在移动端使用。

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

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

使用方法

载入 JavaScript 文件

DOM 结构

设置默认值

调用 cxSelect

设置参数全局默认值

参数说明

名称 默认值 说明
selects [] 下拉选框组。输入 select 的 className
url null 整合列表数据接口地址(URL)

每个选框的内容使用各自的接口地址

data null 自定义数据,类型为数组,数据使用 JSON 格式。
emptyStyle null 子集无数据时 select 的状态。可设置为:”none”(display:none), “hidden”(visibility:hidden)
required false 是否为必选。设为 false 时,会在列表头部添加 <option value=”firstValue”>firstTitle</option> 选项。
firstTitle ‘请选择’ 选框第一个项目的标题(仅在 required 为 false 时有效)
firstValue 选框第一个项目的值(仅在 required 为 false 时有效)
jsonSpace 数据命名空间
jsonName ‘n’ 数据标题字段名称(用于 option 的标题)
jsonValue 数据值字段名称(用于 option 的 value,没有值字段时使用标题作为 value)
jsonSub ‘s’ 子集数据字段名称

data 属性参数

在父元素上的 data- 属性

名称 说明
data-selects 下拉选框组。输入 select 的 className,使用英文逗号分隔的字符串
data-url 列表数据接口地址(此处只能设置 URL,自定义需要在参数中设置)
data-empty-style 子集无数据时 select 的状态
data-required 是否为必选
data-first-title 选框第一个项目的标题
data-first-value 选框第一个项目的值
data-json-space 数据命名空间
data-json-name 数据标题字段名称
data-json-value 数据值字段名称
data-json-sub 子集数据字段名称

<select> 元素上的 data- 属性

名称 说明
data-value 默认选中值
data-url 列表数据接口地址
data-required 是否为必选
data-query-name 传递上一个选框值的参数名称(默认使用上一个选框的 name 属性值)
data-first-title 选框第一个项目的标题
data-first-value 选框第一个项目的值
data-json-space 数据命名空间
data-json-name 数据标题字段名称
data-json-value 数据值字段名称

API 接口

名称 说明
attach() 绑定
调用时会自动进行绑定,用于使用detach解除绑定后,进行重新绑定。
detach() 解除绑定
解除绑定后,不再具有联动效果。
clear(index) 清空选项
清空第 index 个 select 自身及之后的 select 的选项。index: select 的序号,从 0 开始。
setOptions(settings) 重新设置参数settings: 与调用时参数一致。

相关信息

相关文档:
Github
中文文档

 

转载请注明:PHP笔记 » jQuery cxSelect 省市多级联动下拉菜单

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)