如何使用它:

1.在文档中加载jQuery库和Cascader插件的文件。

<link rel="stylesheet" href="/path/to/cascader.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cascader.js"></script>

2.在JS对象数组中准备数据，如下所示：

// languages.js
var languages = [
    {
      "indexcode": "1",
      "name": "Front-End",
      "s": [
        {
        "indexcode": "11",
        "name": "HTML",
          "s": [
            {
                "indexcode": "111",
                "name": "HTML"
            },
            {
                "indexcode": "112",
                "name": "XML"
            },
            {
                "indexcode": "113",
                "name": "HTML5"
            },
          ]
        },
        {
        "indexcode": "12",
        "name": "CSS",
          "s": [
            {
                "indexcode": "121",
                "name": "CSS"
            },
            {
                "indexcode": "122",
                "name": "CSS3"
            },
            {
                "indexcode": "123",
                "name": "CSS4"
            },
          ]
        },
        {
        "indexcode": "13",
        "name": "JavaScript",
          "s": [
            {
                "indexcode": "131",
                "name": "jQuery"
            },
            {
                "indexcode": "122",
                "name": "Angular"
            },
            {
                "indexcode": "123",
                "name": "React"
            },
          ]
        },
      ]
    },
    {
      "indexcode": "2",
      "name": "Back-End",
      "s": [
        {
        "indexcode": "21",
        "name": "C",
          "s": [
            {
                "indexcode": "211",
                "name": "C"
            },
            {
                "indexcode": "212",
                "name": "C++"
            },
            {
                "indexcode": "213",
                "name": "C#"
            },
          ]
        },
        {
        "indexcode": "22",
        "name": "Database",
          "s": [
            {
                "indexcode": "221",
                "name": "MySql"
            },
            {
                "indexcode": "222",
                "name": "SQL"
            },
            {
                "indexcode": "223",
                "name": "Oracle"
            },
          ]
        },
        {
        "indexcode": "23",
        "name": "Others",
          "s": [
            {
                "indexcode": "231",
                "name": "Node.js"
            },
            {
                "indexcode": "122",
                "name": "Python"
            },
            {
                "indexcode": "123",
                "name": "Ruby"
            },
          ]
        },
      ]
    }
]

3.导入数据JavaScript。

<script src="./languages.js"></script>

4.生成一个级联下拉列表，并将其附加到一个输入字段。

<input type="text" id="test"/>

// parse data
languages.forEach(function(item){
  item.label = item.name
  item.value = item.indexcode
  item.children = item.s
  item.s.forEach(function(item2){
    item2.label = item2.name
    item2.value = item2.indexcode
    if (item2.s && item2.s.length) {
      item2.children = item2.s
      item2.s.forEach(function(item3){
        item3.label = item3.name
        item3.value = item3.indexcode
      })
    }
  })
})
 
// initialize
$('#test').zdCascader({
  data: languages,
  container: '#test',
  onChange: function(value, label, datas){
    console.log(value, label, datas);
  }
});

预览截图

jQuery 级联选择框插件 级联