关于
作者
Github
中文文档

jQuery cxSelect 联动下拉菜单

各选项数据接口独立

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

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

省份
城市
地区
<select class="province" name="province" data-url="_test/province.php"></select>
<select class="city" name="city" data-url="_test/city.php" data-json-space="data"></select>
<select class="area" name="area" data-url="_test/area.php" data-json-space="data.list"></select>

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

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

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

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

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

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

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

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

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

第一个选框可不使用接口

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

省份
城市
地区

使用纯数组作为数据

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

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