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":"浙江省"},...]

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

默认取上一个select的name属性值作为参数名，也可以通过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":"下城区"},...]}}

第一个选框可不使用接口

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

省份
城市
地区

使用纯数组作为数据

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

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