级联菜单，也称为“多级下拉菜单”，允许您以紧凑和有组织的方式呈现多级信息层次。这使得用户不必执行另一个操作来获得他/她正在查找的信息。这是分层排列信息最有效的方法之一。

经验丰富的网络开发人员明白开发网站对最终用户的重要性，而不是对他们自己的重要性。网站包括简单的流程、易于使用的导航结构和用户友好的反馈工具，可以帮助提高网站的参与度——因此，当一个人访问你的网站时，他们会立即与个人取得联系，并有效地完成他们的请求。Leet Cascader插件为生成用户友好的输入字段提供了不同的解决方案。

Leet Cascader是一个小型快速的jQuery插件，它将动态级联菜单附加到正常输入字段，用户可以在其中从多级下拉菜单中选择分层数据。这是一个很好的替代品＜选择＞元素，并在您有一些预设的层次数据供用户选择时提供更好的体验。与最新的Bootstrap 5框架完美配合。

如何使用它:

1.要使用此插件，请在页面上包含以下JavaScript和CSS文件。

<!-- jQuery Is REQUIRED -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- jQuery Leet Cascader Plugin Files --> 
<link rel="stylesheet" href="/path/to/css/cascader.css" />
<script src="/path/to/src/assets/js/cascader.js"></script>

<!-- Required For Submenu Indicator --> 
<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css">

<!-- Bootstrap Is OPTIONAL -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

2.将由id、title和子数组组成的数据树定义为儿童[].

var myData = [{
    "id": 1,
    "title": "Electronics",
    "children": [{
      "id": 2,
      "title": "Tvs",
      "children": [{
        "id": 9,
        "title": "Led",
      }]
    }, {
    "id": 5,
    "title": "Monitors",
    "children": [
    ]
    }]
    }, {
    "id": 6,
    "title": "Surf Board",
    "children": [{
      "id": 7,
      "title": "Plastic",
      "children": [
      ]
    }, {
      "id": 8,
      "title": "Wood",
      "children": [{
        "id": 10,
        "title": "Main",
      }]
    }]
}];

3.初始化插件并将级联菜单附加到您指定的输入字段。

<input type="text" id="example" name="category" class="cascader" />

$(document).ready(function() {
  cascader_init('.cascader', myData);
});

预览截图

用户友好 输入字段级联菜单 jQuery Leet级联