http://www.jq22.com/jquery-info3238
插件描述：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 ]