Easy Ajax-enabled Dependent Dropdown Plugin With jQuery - ssdCascadingDropDown
File Size: | 19.6 KB |
---|---|
Views Total: | 10247 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

ssdCascadingDropDown is a jQuery plugin for creating dynamic cascading dropdowns which allow to show/hide select options depending on the changes of other select dropdowns. All the data are stored in the JSON files and will be retrieved via AJAX requests.
Basic usage:
1. Load jQuery library and the jQuery cascading dropdown plugin at the end of the document so the page loads faster.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.cascading-drop-down.js"></script>
2. Create a set of select lists that will be converted into cascading dropdowns. Accepted HTML5 data attributes:
- data-group: indicates association of the select elements and helps distinguish between different groups where multiple blocks of cascading drop-downs are used
- data-target: indicates the select element that should be affected by the value selected from its originator
- data-url: url that needs to be called when the change event is triggered on the given select
- data-replacement: corresponding container with data-replacement-container - used for replacing additional content with each selection
- data-id: the id of the element corresponds to the data-target of the previous element
- data-default-label: the default label for the first option item
<select name="skill" class="cascadingDropDown" data-group="skills" data-target="javascript" data-url="javascript.json" > <option value="">Select skills</option> <option value="1">Ruby</option> <option value="2">JavaScript</option> <option value="3">HTML5</option> <option value="4">CSS3</option> <option value="5">Python</option> </select> <select name="javascript" class="cascadingDropDown" data-group="skills" data-id="javascript" data-target="react" data-url="react.json" data-default-label="Select..." disabled > </select>
3. The JSON structure should be like this:
{ "success": true, "replacement": "Records filtered by the product category and any previous selection", "menu": [ { "name": "jQuery", "value": "1" }, { "name": "Angular", "value": "2" }, { "name": "React", "value": "3" }, { "name": "React Native", "value": "4" }, { "name": "Vue.js", "value": "5" } ] }
4. Initialize the plugin with default options.
$('.cascadingDropDown').ssdCascadingDropDown();
5. All default plugin settings.
$('.cascadingDropDown').ssdCascadingDropDown({ // custom html data attributes attrDataGroup : 'group', attrDataId : 'id', attrDataUrl : 'url', attrDataTarget : 'target', attrDataDefaultLabel : 'default-label', attrDataReplacement : 'replacement', attrDataReplacementContainer : 'replacement-container', attrDataReplacementDefault : 'default-content', // class associated with the receiving container classReplacementContainer : 'cascadingContainer', // json response key to indicate whether the call was successful (true) or not (false) indexSuccess : 'success', // json response key to store the error message indexError : 'error', // json response key to store the new menu items indexMenu : 'menu', // json response key to store the replacement for the content container indexReplacement : 'replacement', // whether to run verification with instantiation verify : true, // callbacks nonFinalCallback : function(trigger, props, data, self) {}, finalCallback : function(trigger, props, data, self) {}, errorCallback : function(message, data) { console.warn(message); } });
Change log:
v1.4.3 (2017-06-26)
- JS update
This awesome jQuery plugin is developed by sebastiansulinski. For more Advanced Usages, please check the demo page or visit the official website.