This time I will share jQuery Plugin and tutorial about jQuery Plugin For Cascading Dropdown Select – cascading-select, hope it will help you in programming stack.
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.
1 |
<select id="s1"></select> |
2 |
<select id="s2"></select> |
3 |
<select id="s3"></select> |
2. Load jQuery library and the jQuery cascading-select plugin’s main script at the bottom of the webpage.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="index.js"></script> |
3. Prepare your hierarchical option data to populate the select element.
15 |
children: ['1.2.1', '1.2.2', '1.2.3'] |
18 |
children: ['1.3.1', '1.3.2', '1.3.3'] |
22 |
children: ['2.1', '2.2', '2.3'] |
30 |
children: ['3.2.1', '3.2.2'] |
33 |
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:
1 |
$('#s1').cascadingSelect({ |
2 |
subSelects: ['#s2', '#s3'], |
5. Customize the placeholders.
1 |
$('#s1').cascadingSelect({ |
3 |
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.
