
Chained Selects is a jQuery plugin for creating dependent dropdowns from JSON data that dynamically populates a set of select elements based on the previous selection.
1. Create a normal empty select element on the webpage.
<select id="example"></select>
2. Put jQuery library and the JavaScript file jquery.chained.selects.js
right before the </body>
tag.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="jquery.chained.selects.js"></script>
3. Prepare your hierarchical data in the JSON objects.
{ "JavaScript": { "jQuery": { "1": "jQuery UI" }, "React": { "2": "React Native" } }, "HTML": { "XML": { "HTML5": { "3": "HTML5/CSS3" } } }, "More": { "AA": { "4": "AAA" }, "AB": { "5": "ABA" }, "AC": { "ABC": { "6": "ABCA", "7": "ABCB" } } } }
4. Activate the plugin and done.
$("#example").chainedSelects({ data: myData });
5. Customize the placeholder for the select elements.
$("#example").chainedSelects({ data: myData, placeholder:'jQueryScript' });
6. Set the maximum number of levels of hierarchical data (Default: 10).
$("#example").chainedSelects({ data: myData, maxLevels: 5 });
7. Enable/disable the debugg mode (Default: false).
$("#example").chainedSelects({ data: myData, loggingEnabled: true });
This awesome jQuery plugin is developed by smarek. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 09.10.2018
- Source