Dynamically Populate Select Options - jQuery popSelectOptions

File Size: 4.82 KB
Views Total: 3835
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 
<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() {
    'options': distances

4. Set the initial option on page load. Default: 0.

$(function() {
    '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.