Remove From My Forums

How to fill a dropdownlist with months of year using javascript

Question
0

Sign in to vote

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

0

Sign in to vote
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
0

Sign in to vote
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

0

Sign in to vote

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
0

Sign in to vote

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

0

Sign in to vote
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
0

Sign in to vote
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
0

Sign in to vote

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
0

Sign in to vote

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
0

Sign in to vote

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

Answered by:

How to fill a dropdownlist with months of year using javascript

Question

Answers

All replies