jQuery Plugin For Cascading Dropdown Select - cascading-select

A lightweight jQuery plugin for creating a cascading dropdown that enables you to dynamically populate a set of select boxes based on the previous selection.

How to use it:

1. Create a set of form select elements on the webpage.

<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>

2. Load jQuery library and the jQuery cascading-select plugin's main script at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="index.js"></script>

3. Prepare your hierarchical option data to populate the select element.

var data = [{
    text: '1',
    value: 'v1',
    children: [{
     text: '1.1',
     children: [{
       text: '1.1.1',
     }, {
       text: '1.1.2',
     }, {
       text: '1.1.3',
     }]
    }, {
     text: '1.2',
     children: ['1.2.1', '1.2.2', '1.2.3']
    }, {
     text: '1.3',
     children: ['1.3.1', '1.3.2', '1.3.3']
    }]
    }, {
    text: '2',
    children: ['2.1', '2.2', '2.3']
    }, {
    text: '3',
    children: [{
     text: '3.1',
     children: ['3.1.1']
    }, {
     text: '3.2',
     children: ['3.2.1', '3.2.2']
    }, {
     text: '3.3',
     children: ['3.3.1', '3.3.2', '3.3.3']
    }]
}];

4. Activate the plugin by calling the function on the first select element as this:

$('#s1').cascadingSelect({
  subSelects: ['#s2', '#s3'],
  data: data
});

5. Customize the placeholders.

$('#s1').cascadingSelect({
  placeholder: false,
  placeholderWhenEmpty: false
});

Changelog:

2018-10-04

• v1.0.3: Prevent TypeError: n is undefined

2018-02-20

• Add placeholderWhenEmpty setting

---

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