Dynamically Populate Select Options - jQuery popSelectOptions

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.