多级联动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"
            },
            ...
        ]
    },
    ...
]

相关推荐

  1. 多级联动jquery-cxselect-js使用

    2024-07-21 16:44:02       28 阅读
  2. jsjquery区别

    2024-07-21 16:44:02       44 阅读
  3. jQuery html使用

    2024-07-21 16:44:02       49 阅读
  4. jsjq之间联系(补)

    2024-07-21 16:44:02       34 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-21 16:44:02       138 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-21 16:44:02       152 阅读
  3. 在Django里面运行非项目文件

    2024-07-21 16:44:02       128 阅读
  4. Python语言-面向对象

    2024-07-21 16:44:02       140 阅读

热门阅读

  1. 使用"山水博客"的排序功能制作"专题文章"

    2024-07-21 16:44:02       21 阅读
  2. C# Word转换HTML(附在线转换工具)

    2024-07-21 16:44:02       28 阅读
  3. memset函数使用原理及用例

    2024-07-21 16:44:02       21 阅读
  4. web前端 React 框架面试200题(一)

    2024-07-21 16:44:02       22 阅读
  5. Kali Linux渗透测试

    2024-07-21 16:44:02       26 阅读
  6. 【LeetCode 0338】【位运算/递归式】求比特位

    2024-07-21 16:44:02       21 阅读
  7. 使用scikit-learn进行机器学习:基础教程

    2024-07-21 16:44:02       28 阅读
  8. 机器学习 -逻辑回归的似然函数

    2024-07-21 16:44:02       20 阅读
  9. oracle 11G long类型如何转换 CLOB

    2024-07-21 16:44:02       21 阅读
  10. CentOS(7.x、8)上安装EMQX

    2024-07-21 16:44:02       26 阅读
  11. Windows 使用 MinGW 编译 OpenCV

    2024-07-21 16:44:02       27 阅读
  12. 【C++之智能指针知识】

    2024-07-21 16:44:02       24 阅读
  13. C++分组背包问题_动态规划dp_背包_算法竞赛

    2024-07-21 16:44:02       22 阅读