jQuery Plugin For Cascading Dropdown Select - cascading-select
File Size: | 5.65 KB |
---|---|
Views Total: | 9655 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.