locked
How to fill a dropdownlist with months of year using javascript RRS feed

  • Question

  • User-1763611275 posted

    [:$]i want to fill months of year in a dropdownlist and when user change the month , a second dropdown list fills with the actual days of the selected month [^o)]

    Tuesday, January 8, 2008 10:59 PM

Answers

  • User323804920 posted

    Hi,

     Try this:

     

    1    <head>
    2        <title>Sample</title>
    3        <script type="text/javascript">
    4        var selectedYear = new Date().getYear(); 
    5        var monthOptions = null;
    6        
    7        function createOption(text, value)
    8        {
    9    		var option = new Option();
    10   		option.text = text;
    11   		option.value = value;
    12   		return option;
    13       }
    14   		
    15       function getMonthOptions()
    16       {
    17   		if (monthOptions == null)
    18   		{
    19   			monthOptions = new Array();
    20   			monthOptions[monthOptions.length] = createOption("January", 0);
    21   			monthOptions[monthOptions.length] = createOption("February", 1);
    22   			monthOptions[monthOptions.length] = createOption("March", 2);
    23   			monthOptions[monthOptions.length] = createOption("April", 3);
    24   			monthOptions[monthOptions.length] = createOption("May", 4);
    25   			monthOptions[monthOptions.length] = createOption("June", 5);
    26   			monthOptions[monthOptions.length] = createOption("July", 6);
    27   			monthOptions[monthOptions.length] = createOption("August", 7);
    28   			monthOptions[monthOptions.length] = createOption("September", 8);
    29   			monthOptions[monthOptions.length] = createOption("October", 9);
    30   			monthOptions[monthOptions.length] = createOption("November", 10);
    31   			monthOptions[monthOptions.length] = createOption("December", 11);
    32   		}
    33   		return monthOptions;
    34       }
    35       
    36       function loadMonths()
    37       {
    38   		var monthsList = document.getElementById('month');
    39   		if (monthsList.options.length == 0)
    40   		{
    41   			var options = getMonthOptions();
    42   			for(var i = 0; i < options.length; i++)
    43   				monthsList.options[i] = options[i];
    44   		} 
    45       }
    46       
    47       function clearOptions(list)
    48       {
    49   		for(var i = 0; i < list.options.length; i ++)
    50   			list.options[i] = null;
    51       }
    52       
    53       function loadDays()
    54       {
    55   		var date = new Date();
    56   		var month = document.getElementById('month').value;
    57   		var year = selectedYear;
    58   		
    59   		month ++;
    60   		if (month == 12) // if it was december, move to next year
    61   		{
    62   			month = 0;
    63   			year ++;
    64   		}
    65   		
    66   		// get the next month's first day and substract a day to obtain the last day in the selected month
    67   		date.setFullYear(year, month, 1); 
    68   		date.setDate(0);
    69   		
    70   		var days = date.getDate();
    71   		
    72   		var daysList = document.getElementById('day');
    73   		clearOptions(daysList);
    74   		
    75   		for(var i = 1; i <= days; i++)
    76   			daysList.options[i - 1] = new Option(i);
    77       }
    78       
    79       function onYearChanged()
    80       {		
    81   		var textbox = document.getElementById('year');
    82   		if (isNaN(textbox.value))
    83   			textbox.value = selectedYear;		
    84   		selectedYear = parseInt(textbox.value);
    85   		textbox.value = selectedYear;
    86   		loadMonths();
    87   		loadDays();
    88       }
    89       
    90       function onMonthChanged()
    91       {
    92   		loadDays();
    93       }
    94       
    95       
    96       </SCRIPT> id=97 97   </head>
    98   <body>
    99       <form id="form1" runat="server">
    100      <div>
    101  		<input type="text" id="year" name="year" onchange="onYearChanged()" />
    102  		<br />
    103  		Month <select name="month" id="month" onchange="onMonthChanged()"></select>
    104  		<br />
    105  		Day <select name="day" id="day"></select>
    106      </div>
    107      </form>
    108  </body>
    109  </html>
    110  
    
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 9, 2008 3:02 AM
  • User-1684099974 posted

    Consider using the CascadingDropdown Extender included in the ASP.NET AJAX Control Toolkit.

    http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx

    http://www.asp.net/learn/ajax-videos/video-77.aspx

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 9, 2008 9:50 AM
  • User-1763611275 posted

    Thank you for replay but i use the following code and when i run the page it did not fill any dropdown list

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head runat="server">

    <title>Untitled Page</title>

     

    <script type="text/javascript">

    var selectedYear = new Date().getYear(); var monthOptions = null;

     

    function createOption(text, value)

    {

    var option = new Option();

    option.text = text;

    option.value = value;

    return option;

    }

     

    function getMonthOptions()

    {

    if (monthOptions == null)

    {

    monthOptions =
    new Array();

    monthOptions[monthOptions.length] = createOption("January", 0);

    monthOptions[monthOptions.length] = createOption("February", 1);

    monthOptions[monthOptions.length] = createOption("March", 2);

    monthOptions[monthOptions.length] = createOption("April", 3);

    monthOptions[monthOptions.length] = createOption("May", 4);

    monthOptions[monthOptions.length] = createOption("June", 5);

    monthOptions[monthOptions.length] = createOption("July", 6);

    monthOptions[monthOptions.length] = createOption("August", 7);

    monthOptions[monthOptions.length] = createOption("September", 8);

    monthOptions[monthOptions.length] = createOption("October", 9);

    monthOptions[monthOptions.length] = createOption("November", 10);

    monthOptions[monthOptions.length] = createOption("December", 11);

    }

    return monthOptions;

    }

     

    function loadMonths()

    {

    var monthsList = document.getElementById('month');if (monthsList.options.length == 0)

    {

    var options = getMonthOptions();

    for(var i = 0; i < options.length; i++)

    monthsList.options[i] = options[i];

    }

    }

     

    function clearOptions(list)

    {

    for(var i = 0; i < list.options.length; i ++)list.options[i] = null;

    }

     

    function loadDays()

    {

    var date = new Date();

    var month = document.getElementById('month').value;

    var year = selectedYear;

     

    month ++;

    if (month == 12) // if it was december, move to next year

    {

    month = 0;

    year ++;

    }

     

    // get the next month's first day and substract a day to obtain the last day in the selected month

    date.setFullYear(year, month, 1);

    date.setDate(0);

     

    var days = date.getDate();

     

    var daysList = document.getElementById('day');

    clearOptions(daysList);

     

    for(var i = 1; i <= days; i++)daysList.options[i - 1] = new Option(i);

    }

     

    function onYearChanged()

    {

    var textbox = document.getElementById('year');if (isNaN(textbox.value))

    textbox.value = selectedYear;

    selectedYear = parseInt(textbox.value);

    textbox.value = selectedYear;

    loadMonths();

    loadDays();

    }

     

    function onMonthChanged()

    {

    loadDays();

    }

    </script>

     

    </head>

     

    <body>

    <form id="form1" runat="server">

    <div>

    <input type="text" id="year" name="year" onchange="onYearChanged()" />

    <br />

    Month <select name="month" id="month" onchange="onMonthChanged()"></select>

    <br />

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

    </div>

    </form>

    </body>

    </html>

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
    plz help me [:(]
    
    
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 9, 2008 10:13 AM

All replies

  • User56700650 posted

    Here is an example which allows you to type in an option, click a button, and add it to the drop down.  It shouldn't be too different for you to modify.... 

    <asp:DropDownList ID="aspMySelect" runat="server">

    </asp:DropDownList><br />

    <asp:TextBox ID="aspNewOption" runat="server"></asp:TextBox>

    <asp:Button ID="Button2" OnClientClick="addAspPopUp()" runat="server" Text="Button" />

    <script type="text/javascript">
    function addAspPopUp()

    {

    var optionText = document.getElementById('aspNewOption').value;

    var textBox = document.getElementById('aspNewOption');

    var objSelect = document.getElementById('aspMySelect');

    objSelect[objSelect.length] = new Option(optionText);textBox.value = "";

    }

    </script>

    Tuesday, January 8, 2008 11:09 PM
  • User1516900176 posted

     protected void Button1_Click(object sender, EventArgs e)
        {
            for (int i = 0; i < 12; i++)
            DropDownList1.Items.Add(DateTime.Now.AddMonths(i).ToString("MMMM"));
       }

    On clicking a button u will get month names in an year into the first dropdownlist...

     

    and for selected index

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {       

            int count = DateTime.DaysInMonth(DateTime.Now.Year, DropDownList1.SelectedIndex+1);
            DropDownList2.Items.Clear();
            for(int i=1;i<=count;i++)
            DropDownList2.Items.Add(i.ToString());

       }
     

    u ll get the days in month into second dropdown on selecting a month from the first one 

    Wednesday, January 9, 2008 1:38 AM
  • User323804920 posted

    Hi,

     Try this:

     

    1    <head>
    2        <title>Sample</title>
    3        <script type="text/javascript">
    4        var selectedYear = new Date().getYear(); 
    5        var monthOptions = null;
    6        
    7        function createOption(text, value)
    8        {
    9    		var option = new Option();
    10   		option.text = text;
    11   		option.value = value;
    12   		return option;
    13       }
    14   		
    15       function getMonthOptions()
    16       {
    17   		if (monthOptions == null)
    18   		{
    19   			monthOptions = new Array();
    20   			monthOptions[monthOptions.length] = createOption("January", 0);
    21   			monthOptions[monthOptions.length] = createOption("February", 1);
    22   			monthOptions[monthOptions.length] = createOption("March", 2);
    23   			monthOptions[monthOptions.length] = createOption("April", 3);
    24   			monthOptions[monthOptions.length] = createOption("May", 4);
    25   			monthOptions[monthOptions.length] = createOption("June", 5);
    26   			monthOptions[monthOptions.length] = createOption("July", 6);
    27   			monthOptions[monthOptions.length] = createOption("August", 7);
    28   			monthOptions[monthOptions.length] = createOption("September", 8);
    29   			monthOptions[monthOptions.length] = createOption("October", 9);
    30   			monthOptions[monthOptions.length] = createOption("November", 10);
    31   			monthOptions[monthOptions.length] = createOption("December", 11);
    32   		}
    33   		return monthOptions;
    34       }
    35       
    36       function loadMonths()
    37       {
    38   		var monthsList = document.getElementById('month');
    39   		if (monthsList.options.length == 0)
    40   		{
    41   			var options = getMonthOptions();
    42   			for(var i = 0; i < options.length; i++)
    43   				monthsList.options[i] = options[i];
    44   		} 
    45       }
    46       
    47       function clearOptions(list)
    48       {
    49   		for(var i = 0; i < list.options.length; i ++)
    50   			list.options[i] = null;
    51       }
    52       
    53       function loadDays()
    54       {
    55   		var date = new Date();
    56   		var month = document.getElementById('month').value;
    57   		var year = selectedYear;
    58   		
    59   		month ++;
    60   		if (month == 12) // if it was december, move to next year
    61   		{
    62   			month = 0;
    63   			year ++;
    64   		}
    65   		
    66   		// get the next month's first day and substract a day to obtain the last day in the selected month
    67   		date.setFullYear(year, month, 1); 
    68   		date.setDate(0);
    69   		
    70   		var days = date.getDate();
    71   		
    72   		var daysList = document.getElementById('day');
    73   		clearOptions(daysList);
    74   		
    75   		for(var i = 1; i <= days; i++)
    76   			daysList.options[i - 1] = new Option(i);
    77       }
    78       
    79       function onYearChanged()
    80       {		
    81   		var textbox = document.getElementById('year');
    82   		if (isNaN(textbox.value))
    83   			textbox.value = selectedYear;		
    84   		selectedYear = parseInt(textbox.value);
    85   		textbox.value = selectedYear;
    86   		loadMonths();
    87   		loadDays();
    88       }
    89       
    90       function onMonthChanged()
    91       {
    92   		loadDays();
    93       }
    94       
    95       
    96       </SCRIPT> id=97 97   </head>
    98   <body>
    99       <form id="form1" runat="server">
    100      <div>
    101  		<input type="text" id="year" name="year" onchange="onYearChanged()" />
    102  		<br />
    103  		Month <select name="month" id="month" onchange="onMonthChanged()"></select>
    104  		<br />
    105  		Day <select name="day" id="day"></select>
    106      </div>
    107      </form>
    108  </body>
    109  </html>
    110  
    
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 9, 2008 3:02 AM
  • User-1684099974 posted

    Consider using the CascadingDropdown Extender included in the ASP.NET AJAX Control Toolkit.

    http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx

    http://www.asp.net/learn/ajax-videos/video-77.aspx

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 9, 2008 9:50 AM
  • User-1763611275 posted

    Thank you for replay but i use the following code and when i run the page it did not fill any dropdown list

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head runat="server">

    <title>Untitled Page</title>

     

    <script type="text/javascript">

    var selectedYear = new Date().getYear(); var monthOptions = null;

     

    function createOption(text, value)

    {

    var option = new Option();

    option.text = text;

    option.value = value;

    return option;

    }

     

    function getMonthOptions()

    {

    if (monthOptions == null)

    {

    monthOptions =
    new Array();

    monthOptions[monthOptions.length] = createOption("January", 0);

    monthOptions[monthOptions.length] = createOption("February", 1);

    monthOptions[monthOptions.length] = createOption("March", 2);

    monthOptions[monthOptions.length] = createOption("April", 3);

    monthOptions[monthOptions.length] = createOption("May", 4);

    monthOptions[monthOptions.length] = createOption("June", 5);

    monthOptions[monthOptions.length] = createOption("July", 6);

    monthOptions[monthOptions.length] = createOption("August", 7);

    monthOptions[monthOptions.length] = createOption("September", 8);

    monthOptions[monthOptions.length] = createOption("October", 9);

    monthOptions[monthOptions.length] = createOption("November", 10);

    monthOptions[monthOptions.length] = createOption("December", 11);

    }

    return monthOptions;

    }

     

    function loadMonths()

    {

    var monthsList = document.getElementById('month');if (monthsList.options.length == 0)

    {

    var options = getMonthOptions();

    for(var i = 0; i < options.length; i++)

    monthsList.options[i] = options[i];

    }

    }

     

    function clearOptions(list)

    {

    for(var i = 0; i < list.options.length; i ++)list.options[i] = null;

    }

     

    function loadDays()

    {

    var date = new Date();

    var month = document.getElementById('month').value;

    var year = selectedYear;

     

    month ++;

    if (month == 12) // if it was december, move to next year

    {

    month = 0;

    year ++;

    }

     

    // get the next month's first day and substract a day to obtain the last day in the selected month

    date.setFullYear(year, month, 1);

    date.setDate(0);

     

    var days = date.getDate();

     

    var daysList = document.getElementById('day');

    clearOptions(daysList);

     

    for(var i = 1; i <= days; i++)daysList.options[i - 1] = new Option(i);

    }

     

    function onYearChanged()

    {

    var textbox = document.getElementById('year');if (isNaN(textbox.value))

    textbox.value = selectedYear;

    selectedYear = parseInt(textbox.value);

    textbox.value = selectedYear;

    loadMonths();

    loadDays();

    }

     

    function onMonthChanged()

    {

    loadDays();

    }

    </script>

     

    </head>

     

    <body>

    <form id="form1" runat="server">

    <div>

    <input type="text" id="year" name="year" onchange="onYearChanged()" />

    <br />

    Month <select name="month" id="month" onchange="onMonthChanged()"></select>

    <br />

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

    </div>

    </form>

    </body>

    </html>

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
    plz help me [:(]
    
    
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 9, 2008 10:13 AM
  • User323804920 posted

    Please type a year in the year textbox, you should see the lists populated. Of course, this code should be modified according to your needs.

    Thursday, January 10, 2008 11:49 AM
  • User628319771 posted

    <asp:DropDownList style="" Font-Size="Smaller" Font-Bold="true" id="ddlDay" Runat="Server"></asp:DropDownList>

    <

    script language="javascript" type

    ="text/javascript">


    ddlMonth = null

    ;

    var


    ddlYear = null

    ;


    Sys.Application.add_load(page_load);

    Sys.Application.add_unload(page_unload);



    function

    page_load(sender, e)

    {

    $find(


    "myCDECountryRegister"

    ).add_selectionChanged(Register_SelectedIndexChangedCountry);

    ddlMonth = $get(


    "<%=ddlMonth.ClientID %>"

    );

    ddlYear = $get(


    "<%=ddlYear.ClientID %>"

    );

    $addHandler(ddlMonth,


    "change"

    , month_onchange);

    $addHandler(ddlYear,


    "change"

    , year_onchange);

    }



    function

    page_unload(sender, e)

    {

    $removeHandler(ddlMonth,


    "change"

    , month_onchange);

    }




    function

    month_onchange(iMonth, iYear)

    {



    var days = 32 - new

    Date(iYear, iMonth, 32).getDate();

    alert (


    "month"

    );

    alert (days);


    }



    function

    year_onchange(iMonth, iYear)

    {



    var days = 32 - new

    Date(iYear, iMonth, 32).getDate();

    alert (


    "year"

    );

    Monday, December 28, 2009 6:26 AM
  • User798903548 posted

    <asp:DropDownList style="" Font-Size="Smaller" Font-Bold="true" id="ddlDay" Runat="Server"></asp:DropDownList>

    <

    script language="javascript" type

    ="text/javascript">

     


    ddlMonth = null

    ;

    var

     


    ddlYear = null

    ;


    Sys.Application.add_load(page_load);

    Sys.Application.add_unload(page_unload);


     


    function

    page_load(sender, e)

    {

    $find(

     


    "myCDECountryRegister"

    ).add_selectionChanged(Register_SelectedIndexChangedCountry);

    ddlMonth = $get(

     


    "<%=ddlMonth.ClientID %>"

    );

    ddlYear = $get(

     


    "<%=ddlYear.ClientID %>"

    );

    $addHandler(ddlMonth,

     


    "change"

    , month_onchange);

    $addHandler(ddlYear,

     


    "change"

    , year_onchange);

    }


     


    function

    page_unload(sender, e)

    {

    $removeHandler(ddlMonth,

     


    "change"

    , month_onchange);

    }



     


    function

    month_onchange(iMonth, iYear)

    {


     


    var days = 32 - new

    Date(iYear, iMonth, 32).getDate();

    alert (

     


    "month"

    );

    alert (days);


    }


     


    function

    year_onchange(iMonth, iYear)

    {


     


    var days = 32 - new

    Date(iYear, iMonth, 32).getDate();

    alert (

     


    "year"

    );

     

    Why are you answering a post that is almost a year old and has been resolved (note the green check mark)?

    NC...

     

     

    Monday, December 28, 2009 9:39 AM