jQuery cxSelect 联动下拉菜单

使用方法

<script src="jquery.js"></script> 
<script src="jquery.cxselect.js"></script>

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

<!-- 方法一：使用 option 的 value 和 selected 属性 --> 
<select class="province"> 
  <option value="浙江省" selected>浙江省</option> 
</select> 
 
<!-- 方法二：使用 select 的 data-value 属性 --> 
<select class="province" data-value="浙江省"></select> 

$('#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'; 

参数说明

data 属性参数

在父元素上的 data- 属性

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

在<select>元素上的 data- 属性

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

在线实例

国内省市区联动

实例预览

全球主要国家城市联动

实例预览

自定义选项

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

$('#custom_data').cxSelect({ 
  selects: ['first', 'second', 'third', 'fourth', 'fifth'], 
  jsonName: 'name', 
  jsonValue: 'value', 
  jsonSub: 'sub', 
  url: [ 
    {name:'A', value: '1', sub: [ 
      {name: 'A-1', value: '2', sub: [ 
        {name: 'A-1-1', value: '11'} 
        // more.. 
      ]} 
      {name: 'A-2', value: '3', sub: [ 
        {name: 'A-2-1', value: '34'} 
      ]} 
      // more.. 
    ]}, 
    {name:'B', value: '5', sub: [ 
      {name: 'B-1', value: '8', sub: [ 
        {name: 'B-1-1', value: '16'} 
      ]} 
    ]} 
    // more.. 
  ] 
});

实例预览

各选项数据接口独立

当各个选项使用各自的接口获取数据时，每次更改选择都会触发一次 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: '' 
});

实例预览

兼容 Zepto

实例预览