您当前所在位置: 首页 >> 特效库 >> 表单

jQuery cxSelect 多级联动下拉菜单

2015年06月19日 来源:网络 31

使用方法

载入 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({ 
  url: 'cityData.min.json'   // 提示:如果服务器不支持 .json 类型文件,请将文件改为 .js 文件 
  selects: ['province''city''area'], 
  nodata: 'none' 
}); 

可设置全局默认值

// 需在引入 <script src="jquery.cxselect.js"></script> 之后,调用之前设置 
$.cxSelect.defaults.url = 'cityData.min.json'; 
$.cxSelect.defaults.nodata = 'none'

参数说明

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

data 属性参数

在父元素上的 data- 属性

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

<select>元素上的 data- 属性

<select class="province" data-value="浙江省" data-first-title="选择省"></select>
名称说明
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'} 
  ]} 
]

最新更新特效

jQuery幻灯片插件 – Resp

2015年07月11日12

jQuery图片模糊插件crossf

2015年07月11日13

jQuery全屏滚动插件fullPa

2015年07月11日23

jQuery cxSelect 多级

2015年06月19日31

CSS3瀑布流网页特效

2014年12月30日96

HTML5+CSS3鼠标悬停图片事件

2014年12月16日130
关于设界| 主营业务| 服务流程| 建站套餐| 成品选购| 案例展示| 特效库| 新闻中心
设界风向标 ©2014 eshejie.com All rightsreserve.
地址:成都物流大道普洛斯A线
蜀ICp备14005826号-1 站长统计
温馨提示: 请客户合作时务必审查对方能否提供以往作品原始文件及客户相关负责人信息;请勿上当受骗。
客服电话:028-64866096
客服 QQ:2739394928
投诉电话:13688028095
电子邮件:eshejie@163.com eshejie@qq.com
官网网址:www.eshejie.com