Cascading Selection Box Plugin With jQuery - Cascader

A cascading selection box is a unique selection mechanism that is especially useful for selecting items from a large list. Cascader is a jQuery plugin that implements this functionality.

This jQuery plugin generates a user-friendly, multi-column cascading dropdown list from an array of JS objects and allows you to append it to any text field within the document. Inspired by Element UI and Ant Design's Cascader component.

See Also:

• 10 Best Cascading Dropdown Plugin In jQuery And Pure JavaScript

See It In Action:

How to use it:

1. Load jQuery library and the Cascader plugin's files in the document.

<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. Prepare your data in an array of JS objects as follows:

// 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. Import the data JavaScript.

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

4. Generate a cascading dropdown and append it to an input field.

<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);
  }
});

---

This awesome jQuery plugin is developed by zh-rey. For more Advanced Usages, please check the demo page or visit the official website.