cacookejr
asked on
Simple javascript to populate dropdown starting with current month
I need a javascript example of how to populate a dropdown box with months of the year.
This list needs to start with the current month, continuing for 1 year.
The value options for the dropdown needs to start at 0 and end at 11.
Example:
Current month display: November
Option value: 0
Next month display: December
option value: 1
Next month display: January
option value: 2
and on till option value = 11 for a total of 12 options.
I am more of a PHP programmer, but this needs to be done in Javascript.
As always, this is an emergency.
Thanks in advance
Cliff
This list needs to start with the current month, continuing for 1 year.
The value options for the dropdown needs to start at 0 and end at 11.
Example:
Current month display: November
Option value: 0
Next month display: December
option value: 1
Next month display: January
option value: 2
and on till option value = 11 for a total of 12 options.
I am more of a PHP programmer, but this needs to be done in Javascript.
As always, this is an emergency.
Thanks in advance
Cliff
ASKER
That is very helpful, but could you give me full working example, HTML included?
I'm just out of time.
Thanks
I'm just out of time.
Thanks
This function addOption will do the adding selection for you.
<script type="text/javascript">
function addOption(selectbox,text,v
{
var optn = document.createElement("OP
optn.text = text;
optn.value = value;
selectbox.options.add(optn
}
var d=new Date();
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
var monthNo = d.getMonth();
var counter;
for(counter = 0; counter <= 11; counter++){
addOption(ddlMonth,month[m
if(monthNo == 11){
monthNo = 0;
}else{
monthNo += 1;
}
}
</script>
This is assuming your dropdownlist is called ddlMonth. Change the code where needed. Im pretty sure that this will work. Hope it helped u :D
<script type="text/javascript">
function addOption(selectbox,text,v
{
var optn = document.createElement("OP
optn.text = text;
optn.value = value;
selectbox.options.add(optn
}
var d=new Date();
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
var monthNo = d.getMonth();
var counter;
for(counter = 0; counter <= 11; counter++){
addOption(ddlMonth,month[m
if(monthNo == 11){
monthNo = 0;
}else{
monthNo += 1;
}
}
</script>
This is assuming your dropdownlist is called ddlMonth. Change the code where needed. Im pretty sure that this will work. Hope it helped u :D
ASKER
I'm sorry, but I am still confused.
I just don't understand how to integrate this into the HTML.
Right now I have it basic like this.
<BODY onLoad="addOption_list()";
<select name="ddlMonth" id="ddlMonth" class="fields">
<OPTION value="NONE">Select a date</OPTION>
</select>
Which of course does nothing.
Could you please give me a working example?
I just don't understand how to integrate this into the HTML.
Right now I have it basic like this.
<BODY onLoad="addOption_list()";
<select name="ddlMonth" id="ddlMonth" class="fields">
<OPTION value="NONE">Select a date</OPTION>
</select>
Which of course does nothing.
Could you please give me a working example?
oops. i forgot to add in the onload event. my bad. here's the working one.
by doing so, the javascript part (filling up the dropdownlist) will happen during form load. haha.. hope this helps! :D
by doing so, the javascript part (filling up the dropdownlist) will happen during form load. haha.. hope this helps! :D
<script type="text/javascript">
function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
</script>
<script language="javascript" for="window" event="onload">
var d=new Date();
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
var monthNo = d.getMonth();
var counter;
for(counter = 0; counter <= 11; counter++){
addOption(ddlMonth,month[monthNo],counter);
if(monthNo == 11){
monthNo = 0;
}else{
monthNo += 1;
}
}
</script>
<html>
<body>
<select name="ddlMonth" id="ddlMonth" class="fields">
<OPTION value="NONE">Select a date</OPTION>
</select>
</body>
</html>
according to what you asked for
November - value should be 0
December - value should be 1and so on..
November - value should be 0
December - value should be 1and so on..
<html>
<head>
<script type="text/javascript">
var months ={
"0":"January",
"1":"February",
"2":"March",
"3":"April",
"4":"May",
"5":"June",
"6":"July",
"7":"August",
"8":"September",
"9":"October",
"10":"November",
"11":"December"
};
function populateMonths()
{
var monthSel = document.getElementById('months');
var curDate = new Date();
for(var i=0;i<12;i++)
{
var val = (curDate.getMonth() + i)%12;
monthSel.options[monthSel.options.length] = new Option(months[val],i);
}
}
window.onload=populateMonths;
</script>
</head>
<body>
Months:
<select id="months" onchange="alert('The value is:'+this.value);alert('The month is:'+this.options(this.selectedIndex).text);">
<OPTION value="NONE">Select a date</OPTION>
</select>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
third:
This seems to work correctly.
Just one question.
When the realtime month changes from november to december, will the script then make the first choice DECEMBER and set that as OPTION value 0?
That is what I need it to do also.
Please advise and thank all of you for all the help.
This seems to work correctly.
Just one question.
When the realtime month changes from november to december, will the script then make the first choice DECEMBER and set that as OPTION value 0?
That is what I need it to do also.
Please advise and thank all of you for all the help.
yes it will work like that. you can test that by changing your computer date to december.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
and yes don't forget that kadaba's code is correct too.
ASKER
I would like to thank all of you for the assistance.
Very accurate and very fast.
I don't know if it will work but I am trying to award all contributors at least 100 points, with 500 going to Third as that seemed to be the most simple, easiest to implement and doese exactly what I want.
Thanks to all
Very accurate and very fast.
I don't know if it will work but I am trying to award all contributors at least 100 points, with 500 going to Third as that seemed to be the most simple, easiest to implement and doese exactly what I want.
Thanks to all
100/500
was definitely not what I expected.
>> Third as that seemed to be the most simple, easiest to implement and doese exactly what I want.
Might be that you know arrays so it seemed simple enough to you.
Fine, not a problem.
Good luck and have a great day
was definitely not what I expected.
>> Third as that seemed to be the most simple, easiest to implement and doese exactly what I want.
Might be that you know arrays so it seemed simple enough to you.
Fine, not a problem.
Good luck and have a great day
use this code it might help u ...
<html>
<head>
<script type = "text/javascript">
//window.onload = monthDropDown();
function monthDropDown(){
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November","December"];
var today = new Date();
var curentMonth = today.getMonth();
var select = document.createElement("select");
for(var i=0 ; i< 12; i++){
var option =document.createElement("option");
curentMonth %= 12;
if(i == 0)
document.body.innerHTML += "Current month is "+month[curentMonth] + "<BR>" ;
else
document.body.innerHTML += "Next Month is " + month[curentMonth] + "<BR>" ;
document.body.innerHTML += "Option value is " + i + "<BR><BR><BR>" ;
option.setAttribute("value",i);
option.appendChild(document.createTextNode(month[curentMonth]));
//or ucan use option.text = month[curentMonth];
select.appendChild(option);
curentMonth++;
}
document.body.appendChild(select);
}
</script>
</head>
<body onload="monthDropDown()">
</body>
</html>
ASKER
I don't want to make anyone upset.
I simply used the implementation that I could understand the fastest.
I appreciate everyones input and the promptness.
Unfortunatley, this system won't allow me to give everyone 500 points.
I wish it would since I am a paying member and have been for years.
Please keep up the good work people.
Thank you very much.
I simply used the implementation that I could understand the fastest.
I appreciate everyones input and the promptness.
Unfortunatley, this system won't allow me to give everyone 500 points.
I wish it would since I am a paying member and have been for years.
Please keep up the good work people.
Thank you very much.
var d=new Date();
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
document.write("The current month is " + month[d.getMonth()]);
//d.getMonth() will return you a number from 0 to 11. so by using this number, you can loop through the array and at the same time populating the combobox.! :D
</script>
hope this helps! :D