多级联动jquery-cxselect-js的使用

引入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"
            },
            ...
        ]
    },
    ...
]