引入jquery.cxselect.min.js
创建表单
<form id="formId">
<div class="select-list">
<ul>
<li>
一级栏目:
<select name="first" class="first">
<option value="">所有</option>
</select>
</li>
<li>
二级栏目:
<select name="second" class="second">
<option value="">所有</option>
</select>
</li>
</ul>
</div>
</form>
使用
// 通过默认url获取
var calssUrl = ""; // 请求地址
$.cxSelect.defaults.url = calssUrl;
$('#formId').cxSelect({ // 筛选框的上层元素的id
selects: ['first', 'second'], // 此为筛选框的class名,按照层级展示的内容,first为第一层,second为第二层,以此类推
firstValue: '', // 默认显示在第一的选项
jsonValue: 'code', // 选项中的value使用返回值的哪个字段
jsonName: 'name', // 选项中的text使用返回值的哪个字段
jsonSub: 'children' // 子级的字段名
});
返回值的样例
[
{
"name": "教育",
"code": "code1",
"children": [
{
"name": "益智",
"code": "code2"
},
{
"name": "英语",
"code": "code3"
},
...
]
},
...
]