Dynamically Populate Select Options - jQuery popSelectOptions
File Size: | 4.82 KB |
---|---|
Views Total: | 3962 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> </script> <script src="jquery.popSelectOptions.min.js"></script>
2. Define an array of objects containing labels and values for select options.
const myData = [ {'value': '1', 'label': 'jQueryScript'}, {'value': '2', 'label': 'CSSSCRIPT'}, {'value': '3', 'label': 'AngularJS'}, {'value': '4', 'label': 'React Native'}, {'value': '5', 'label': 'Vue.js'} ];
3. Attach the function popSelectOptions
to an empty select
element and specify the data source as follows:
<select id="example"></select>
$(function() { $('#example').popSelectOptions({ 'options': distances }); })
4. Set the initial option on page load. Default: 0.
$(function() { $('#example').popSelectOptions({ 'options': 2 // option 3 }); })
This awesome jQuery plugin is developed by gar-cad. For more Advanced Usages, please check the demo page or visit the official website.