插件描述：cxSelect 是基于 jQuery 的多级联动菜单插件，适用于省市、商品分类等联动菜单。 列表数据通过 AJAX 获取（需要在服务器环境运行），也可以使用变量自定义，数据内容使用 JSON 格式。

载入 JavaScript 文件



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



HTML代码



1 <!-- 
 2 select 必须放在元素 id="element_id" 的内部，不限层级 
 3 select 的 class 任意取值，也可以附加多个 class，如 class="province otherclass"，在调用时只需要输入其中一个即可，但是不能重复 
 4 如需设置 select 默认值，加上 data-value 属性，例：<select class="province" data-value="浙江省"></select> 
 5 --> 
 6 <div id="element_id"> 
 7   <select class="province"></select> 
 8   <select class="city"></select> 
 9   <select class="area"></select> 
10 </div>



调用 cxSelect



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



可设置全局默认值



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



参数说明

selects

[]

下拉选框组。输入 select 的 className

url

null

列表数据文件路径（URL） | 对象（值为 JSON 的结构，参照自定义数据结构）

nodata

null

子集无数据时 select 的状态。可设置为："none"(display:none), "hidden"(visibility:hidden)

required

false

是否为必选。设为 flase 时，会在列表头部添加 <option value="0">请选择</option> 选项。

firstTitle

'请选择'

选框第一个项目的标题。如果要定义每个选框的第一个项目标题，可以通过 <select> 的 data-first-title 属性来设置。（仅在 required 为 false 时有效）

firstValue

'0'

选框第一个项目的值。如果要定义每个选框的第一个项目值，可以通过 <select> 的 data-first-value 属性来设置。（仅在 required 为 false 时有效）

data 属性参数

 

在父元素上的 data- 属性



1 <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- 属性



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



data-value

默认值

data-first-title

第一个项目的标题

data-first-value

第一个项目的值

 

 

数据 JSON 结构

 

v

string | number

设置 option 的值（可选项，未设置则使用 n）

n

string

设置 option 的文本

s

array

当前选项的子集

自定义数据结构



1 /* 使用 JSON 格式 
 2  * v: 设置 option 的值（可选项，未设置则使用 n） 
 3  * n: 设置 option 的文本 
 4  * s: 当前选项的子集 
 5  */ 
 6 [ 
 7   {'v': '1', 'n': 'A'}, 
 8   {'v': '2', 'n': 'B', 's': [ 
 9     {'v': '3', 'n': 'Banana'}, 
10     {'v': '4', 'n': 'Blue'}, 
11     {'v': '5', 'n': 'Bus'} 
12   ]}, 
13   {'v': '6', 'n': 'C'}, 
14   {'v': '7', 'n': 'D', 's': [ 
15     {'v': '8', 'n': 'day'}, 
16     {'v': '9', 'n': 'del'} 
17   ]} 
18 ]