你的位置:首页 > Java教程

[Java教程]jQuery cxSelect 联动下拉菜单

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

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

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

最新国内省市县数据来源:basecss/cityData

github


使用方法

载入 JavaScript 文件

  1. <script src="jquery.js"></script> 
  2. <script src="jquery.cxselect.js"></script>
复制

DOM 结构

  1. <!-- 
  2. select 必须放在元素 id="element_id" 的内部,不限层级 
  3. select 的 class 任意取值,也可以附加多个 class,如 ,在调用时只需要输入其中一个即可,但是不能重复 
  4. --> 
  5. <div id="element_id"> 
  6.   <select class="province"></select> 
  7.   <select class="city"></select> 
  8.   <select class="area"></select> 
  9. </div> 
复制

设置默认值

  1. <!-- 方法一:使用 option 的 value 和 selected 属性 --> 
  2. <select class="province"> 
  3.   <option value="浙江省" selected>浙江省</option> 
  4. </select> 
  5.  
  6. <!-- 方法二:使用 select 的 data-value 属性 --> 
  7. <select class="province" data-value="浙江省"></select> 
复制

调用 cxSelect

  1. $('#element_id').cxSelect({ 
  2.   url: 'cityData.min.json',               // 如果服务器不支持 .json 类型文件,请将文件改为 .js 文件 
  3.   selects: ['province', 'city', 'area'],  // 数组格式,请注意顺序 
  4.   nodata: 'none' 
  5. }); 
复制

设置参数全局默认值

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

参数说明

名称默认值说明
selects[]下拉选框组。输入 select 的 className
urlnull

整合列表数据接口地址(URL) | 数组 。数据使用 JSON 格式。

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

nodatanull子集无数据时 select 的状态。可设置为:"none"(display:none), "hidden"(visibility:hidden)
requiredfalse是否为必选。设为 false 时,会在列表头部添加 <option value="firstValue">firstTitle</option> 选项。
firstTitle'请选择'选框第一个项目的标题(仅在 required 为 false 时有效)
firstValue''选框第一个项目的值(仅在 required 为 false 时有效)
jsonSpace''数据命名空间
jsonName'n'数据标题字段名称(用于 option 的标题)
jsonValue''数据值字段名称(用于 option 的 value,没有值字段时使用标题作为 value)
jsonSub's'子集数据字段名称

data 属性参数

在父元素上的 data- 属性

  1. <div id="element_id" data-url="cityData.min.json" data-required="true"></div>
复制

   

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

<select>元素上的 data- 属性

  1. <select class="province" data-value="浙江省" data-first-title="选择省"></select>
复制

         

名称说明
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数据值字段名称

在线实例

国内省市区联动 

实例预览

全球主要国家城市联动

实例预览

自定义选项

PS: 自定义数据时,虽然值可以设置为除了文本以外的类型,但最终都会被转化为文本。

  1. $('#custom_data').cxSelect({ 
  2.   selects: ['first', 'second', 'third', 'fourth', 'fifth'], 
  3.   jsonName: 'name', 
  4.   jsonValue: 'value', 
  5.   jsonSub: 'sub', 
  6.   url: [ 
  7.     {name:'A', value: '1', sub: [ 
  8.       {name: 'A-1', value: '2', sub: [ 
  9.         {name: 'A-1-1', value: '11'} 
  10.         // more.. 
  11.       ]} 
  12.       {name: 'A-2', value: '3', sub: [ 
  13.         {name: 'A-2-1', value: '34'} 
  14.       ]} 
  15.       // more.. 
  16.     ]}, 
  17.     {name:'B', value: '5', sub: [ 
  18.       {name: 'B-1', value: '8', sub: [ 
  19.         {name: 'B-1-1', value: '16'} 
  20.       ]} 
  21.     ]} 
  22.     // more.. 
  23.   ] 
  24. });
复制

实例预览

各选项数据接口独立

当各个选项使用各自的接口获取数据时,每次更改选择都会触发一次 AJAX 请求,请求时会传递已选择的值。

适合整合后的数据非常大、无法整合、以及未对数据整合的情况下使用。

  1. <select class="province" name="province" data-url="_test/province.php"></select> 
  2. <select class="city" name="city" data-url="_test/city.php" data-json-space="data"></select> 
  3. <select class="area" name="area" data-url="_test/area.php" data-json-space="data.list"></select>
复制

调用 cxSelect 时,将使用 get 请求方法,通过data-url属性设定的接口地址,获取省份数据

  1. // _test/province.php 
  2. [{"value":1,"name":"北京市"},{"value":2,"name":"上海市"},{"value":3,"name":"浙江省"},...]
复制

当选择省份为“浙江省”时,对应的value3,会在获取城市数据接口中添加对应参数,获取城市数据

默认取上一个selectname属性值作为参数名,也可以通过data-query-name来设置参数名

由于城市接口返回的数据是一个 JSON,但是城市数据放在 data 属性中,所以需要通过data-json-space="data"设置命名空间

  1. // _test/city.php?province=3 
  2. {"state":"success","data":[{"value":301,"name":"杭州市"},{"value":302,"name":"宁波市"},...]}
复制

当选择城市为“杭州市”时,也会传递对应参数,获取市区数据

而市区接口返回的数据层级更深,依然可以通过data-json-space="data.list"设置命名空间,以此类推

  1. // _test/area.php?city=301 
  2. {"state":"success","data":{"list":[{"value":3101,"name":"上城区"},{"value":3102,"name":"下城区"},...]}}
复制

实例预览

第一个选框可不使用接口

当第一个选框在页面加载时已有选项时,可以不设置第一个选框的接口,减少连接数

实例预览

使用纯数组作为数据

如果返回数据或自定义数据为纯数组时,请将jsonNamejsonValue设置空字符串,也可以在<select>data-json-namedata-json-value属性中设置。

  1. <!-- 通过 data 属性设置 --> 
  2. <select data-json-name="" data-json-value=""></select>
复制
  1. // 或调用时,通过参数设置 
  2. $('#array_data').cxSelect({ 
  3.   selects: ['first', 'second', 'third'], 
  4.   jsonName: '', 
  5.   jsonValue: '' 
  6. });
复制

实例预览

兼容 Zepto

实例预览