Dynamic Date Dropdown Menu

Rated out of 5 stars (4.2) - 5 Total Votes

This article will explain how to Dynamically populate a dropdown menu of days dependent on the Month selected.

NOTE: The only caveat is that it does not take Leap Year into consideration!

We will be using JavaScript and CLASP in this article.

First the JavaScript

Place this in between the head tags of your document

  <script language="javascript">
    function focusarea(intMonthID,intNum) {
      this.Num = intNum;
      this.monthID = intMonthID;
  function getFocusArea() {
    var sSelect = '<select name="dcount">';
    var selectID = document.schedule.mcount.value;
    for (var x=1; x<aFocusArea.length; x++) {
      if (aFocusArea[x].monthID == selectID) {
        for (var i=1; i<aFocusArea[x].Num+1; i++) {
        sSelect = sSelect + '<option>' + [i] + '</option>'
  sSelect = sSelect + '</select>';
  document.all['Focus'].innerHTML = "";
  document.all['Focus'].innerHTML = sSelect;
  var aFocusArea = new Array;
  aFocusArea[1] = new focusarea(1,31);
  aFocusArea[2] = new focusarea(2,29);
  aFocusArea[3] = new focusarea(3,31);
  aFocusArea[4] = new focusarea(4,30);
  aFocusArea[5] = new focusarea(5,31);
  aFocusArea[6] = new focusarea(6,30);
  aFocusArea[7] = new focusarea(7,31);
  aFocusArea[8] = new focusarea(8,31);
  aFocusArea[9] = new focusarea(9,30);
  aFocusArea[10] = new focusarea(10,31);
  aFocusArea[11] = new focusarea(11,30);
  aFocusArea[12] = new focusarea(12,31);

Just a few notes on the JavaScript!

This takes the value from the Month dropdown menu.

var selectID = document.schedule.mcount.value;

This part of the function compares the value from the month menu and finds the appropriate array to get the proper day count then populates the day menu with the corresponding number of days.

  for (var x=1; x<aFocusArea.length; x++) {
    if (aFocusArea[x].monthID == selectID) {
      for (var i=1; i<aFocusArea[x].Num+1; i++) {
      sSelect = sSelect + '<option>' + [i] + '</option>'

Place the code below in a place where you can access it, If you are only going to use it on one page then you can put it at the top of your ASP page. If you want multiple pages to access it then what I do is put it in a page called "common.asp" then I use an include at the top of each page I want to use it in IE: <!-- #include file="common.asp"-->

  Sub selectDate
    Response.Write "<select name=""mcount"" OnChange=""getFocusArea();"">" & vbcrlf
    Response.Write "<option value=""0"">Select Month</option>" & vbcrlf
    For mcount = 1 to 12
      Response.Write "  <option value="""&mcount&""">" & mcount & "</option>" & vbcrlf
    Response.Write " </select>" & vbcrlf
    <span id="Focus">
      <select name="dcount">
        <option>Select Day</option>
    Response.Write "  <select name=""ycount"">" & vbcrlf
    For ycount = 7 to 20
      If ycount >= 10 Then
        Response.Write "  <option>20" & ycount & "</option>" & vbcrlf
        Response.Write "  <option>200" & ycount & "</option>" & vbcrlf
      End If
    Response.Write " </select>" & vbcrlf
  End Sub

To use the Sub Procedure above place the form below where you want the menu to appear on your ASP page:

  <form action="myform.asp" name="schedule" method="post">
  <% Call selectDate %>
  <input type="submit" value="Submit" />

Or you can place it between your CLASP code:

  Response.Write "<form action=""myform.asp"" name=""schedule"" method=""post"">"
  Some ASP form code...
  Call selectDate
  Some more ASP form Code

  Response.Write "</form>"

Note that the name of the Form is "schedule" that MUST be included in the form tag.

About the Author

Steve Frazier has been a classic ASP developer since 2003. He has developed CLASP applications for Fortune 500 companies and popular website's. He has also developed many ASP Scripts of his own! He is Web-master of HTMLJunction as well as its sister site - ASP Junction. He is currently working on a Web Portal that has the functionality of all the most popular Forums and Portals.

I hope you found this article useful!
Rate this Article