This time I will share jQuery Plugin and tutorial about Dynamically Populate Select Options – jQuery popSelectOptions, hope it will help you in programming stack.
popSelectOptions is a really small (~1kb) jQuery plugin for dynamic dropdown list that dynamically loads and populates a select element with options defined in a JS array.
How to use it:
1. Include the jQuery popSelectOptions plugin on the page where needed. Be sure to include it after the latest jQuery.
2 |
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" |
3 |
crossorigin="anonymous"> |
5 |
<script src="jquery.popSelectOptions.min.js"></script> |
2. Define an array of objects containing labels and values for select options.
2 |
{'value': '1', 'label': 'jQueryScript'}, |
3 |
{'value': '2', 'label': 'CSSSCRIPT'}, |
4 |
{'value': '3', 'label': 'AngularJS'}, |
5 |
{'value': '4', 'label': 'React Native'}, |
6 |
{'value': '5', 'label': 'Vue.js'} |
3. Attach the function popSelectOptions to an empty select element and specify the data source as follows:
1 |
<select id="example"></select> |
2 |
$('#example').popSelectOptions({ |
4. Set the initial option on page load. Default: 0.
2 |
$('#example').popSelectOptions({ |
This awesome jQuery plugin is developed by gar-cad. For more Advanced Usages, please check the demo page or visit the official website.
