Cascading Dropdown lists initialization using javascript

This resource provides an approach for 'Reseting 2nd Dropdown list (months) based on SelectedIndexChange event of 1st Dropdown list (years)' with the help of javascript. (for ease i have hard-coded years and months Dropdown lists but available dates (year and months) can be stored in a comma seperated string/text (code behind from database/etc) which can be accessed in javascript using a hidden field to reset Dropdown lists).

Cascading Dropdown initialization using javascript

Start with an web application project in Visual Studio 2010.

Make your <html>...</html> section of UI as follows:

<html xmlns="">
<head runat="server">
     <script type="text/javascript">
          // #New# - start

          function FillMonth() {

               var objMessage = document.getElementById('lblMessage');
               objMessage.innerHTML = "";

               var objYear = document.getElementById('SelectY');
               var objMonth = document.getElementById('SelectM');

               var indexYear = objYear.selectedIndex;
               var txtYearValue = objYear.options[indexYear].text;

               var monthNames1 = ["January", "February", "March", "July", "August", "September"];
               var monthNames2 = ["March", "July", "December"];
               var monthNames3 = ["February", "March", "July", "August"];

               // Make target DDL empty
               var currentLength = objMonth.options.length;
               for (l = 0; l < currentLength; l++) {
                    objMonth.remove(0); //It is 0 (zero) intentionally

               // Add "Select" to DDL
               var selectOption = document.createElement("option");
               selectOption.text = "Select";
               selectOption.value = 0;

               var ln = 0;
               if (txtYearValue == "2009") {
                    ln = monthNames1.length;
               if (txtYearValue == "2012") {
                    ln = monthNames2.length;
               if (txtYearValue == "2013") {
                    ln = monthNames3.length;

               // add options in the target DDL
               for (var j = 0; j < ln; j++) {
                    var newOption = document.createElement("option");
                    if (txtYearValue == "2009") {
                         newOption.text = monthNames1[j];
                    if (txtYearValue == "2012") {
                         newOption.text = monthNames2[j];
                    if (txtYearValue == "2013") {
                         newOption.text = monthNames3[j];
                    newOption.value = (j + 1).toString();
     <form id="form1" runat="server">
     <asp:Label ID="Label1" runat="server" Text="Select Month and Year:" />
     <br />
          <select id="SelectY" name="SelectY" runat="server" size="1" onchange="return FillMonth();">
               <option value="0">Select</option>
               <option value="2009">2009</option>
               <option value="2012">2012</option>
               <option value="2013">2013</option>
          <select id="SelectM" name="SelectM" runat="server" size="1">
               <option value="0">Select</option>
               <option value="1">Jan</option>
               <option value="2">Feb</option>
               <option value="3">Mar</option>
               <option value="4">Apr</option>
               <option value="5">May</option>
               <option value="6">Jun</option>
               <option value="7">Jul</option>
               <option value="8">Aug</option>
               <option value="9">Sep</option>
               <option value="10">Oct</option>
               <option value="11">Nov</option>
               <option value="12">Dec</option>
     <br />
     <asp:Button ID="btnGo" runat="server" Text="Go" OnClick="btnGo_Click" />
     <br />
     <br />
     <asp:Label ID="lblMessage" runat="server" Text="Before" />
     <br />

Add Click ebent for btnGo as follows:

protected void btnGo_Click(object sender, EventArgs e)
    lblMessage.Visible = true;
    lblMessage.Text = String.Format("Message: You have selected: {0}-{1}", SelectM.Items[SelectM.SelectedIndex].Text, SelectY.Items[SelectM.SelectedIndex].Text);

Run (F5) to test.

Sample application is attached.

Similar approach can be followed to provide cascading reset effect for multiple Dropdown lists, such as:

- Countries > States > Cities > Locations lists


- Categories > Technologies > Articles lists



  • Complete code sample for this resource (44226-1503-Complete-code-sample-this-resource.txt)
  • Comments

    No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: