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.