Add A Range Of Options To Select Box Programmatically - selectrange

selectrange is a tiny jQuery plugin that enables you to programmatically add values with a permitted range to an empty select element.

A typical use of this plugin is to create a dropdown based DOP picker where the users can select the year, month and day within the specified range.

How to use it:

1. Download the package and insert the JavaScript selectrange.js after loading jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/selectrange.js"></script>

2. Create empty select boxes on the webpage.

<label>Year</label>
<select id="year">
</select>

<label>Month</label>
<select id="month">
</select>

<label>Day</label>
<select id="day">
</select>

3. Call the function on the select boxes and determine the min/max values in the range of permitted values. Default: {min:0, max:10}.

$(document).ready(function() {

  $("#year").selectRange({
    min: 1990,
    max: 2020
  });

  $("#month").selectRange({
    min: 1,
    max: 12
  });

  $("#day").selectRange({
    min: 1,
    max: 31
  });
  
})

---

This awesome jQuery plugin is developed by razvaniacob. For more Advanced Usages, please check the demo page or visit the official website.