Software, your way.
burger menu icon
WillMaster

WillMasterBlog > JavaScript

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

Dynamic Year List Dropdown

Form dropdown fields with year selections related to the current year need to be updated at the start of every year. That is, unless you have the dropdown set up to automatically stay current, which is what this article is about.

An example of selections related to the current year are credit card information forms, where you may want the current year and the next 6 years available for selection. Another example is a form to select the year for a calendar download, in which case the next year and some years thereafter should be selectable.

The first of the following examples lists the current year and next year. The second lists five year numbers, beginning with next year. The third lists the 8 previous years.





The above dropdown selection examples are created with this JavaScript. Following the code are instructions.

<select>
<option value="">-- Select Year --</option>
<script type="text/javascript">
var StartYear = +0; // use +0 to start with the current year; -1 for last year; +1 for next year; +3 for three years from now; or so forth.
var HowManyYears = 2; // How many years to list in the selection.
var today = new Date();
var year = today.getFullYear();
for(var i=0; i<HowManyYears; i++)
{
   var y = (year+StartYear)+i;
   document.write('<option value="' + y + '">' + y + '</option>');
}
</script>
</select>

The first 2 lines and the last line of the above code represent your selection form field:

  • (line 1) your select tag.
  • (line 2) the optional first selection for instructions.
  • (last line) the closing </select> tag.

Your select tag might have an id attribute and/or a name attribute. It might also have other attributes.

In between the code that represents your selection form field is the JavaScript that writes the options with the year numbers. The JavaScript has two places to edit:

  1. Update the +0 value in the var StartYear = +0; line.

    To start the dropdown list with the current year, specify +0 as the value.

    To start the list with last year, specify -1 as the value or to start the list with next year, specify +1.

    The digit you use represents the number of years. The "+" or "−" represents the next or past, respectively. As an example, +3 starts the dropdown list with the year number for 3 years in the future.

  2. Update the 2 value in the var HowManyYears = 2; line.

    The number that 2 is replaced with tells the JavaScript how many year numbers to populate the dropdown with. (Year numbers will be sequential, ascending.)

The JavaScript automatically lists the year numbers in the dropdown in relation to the current year. It gives you a year list.

(This content first appeared in Possibilities newsletter.)

Will Bontrager

Was this blog post helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method


All information in WillMaster Blog articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

Recent Articles in the Library

The HTML Q Tag

Create a style then use the HTML q tag to apply the style. This is about as easy as it gets for attracting attention to quotes.

Plain Text To HTML Converter

Here is a function to convert plain text from a form textarea field into HTML for publishing on a web page or in an email.

HTML for Meme Making

No fancy image creation software is needed to make memes. An easy way is to create a web page with text over an image or color background and screenshot it.

Image Color Saturation

The CSS filter:saturate() declaration can be used to lesson color saturation and to intensify color saturation of images.

PDF to Text Conversion

If you can use a PDF to text converter and your website is on a Linux machine, this one should do you well.

Text Emphasis

When your writing can be improved with the correct emphasis, this CSS may be used.

Dropdown Links

I used to see many dropdown links during the earlier part of my internet experience.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2025 Will Bontrager Software LLC