s.b37, got to say, that is an odd function you have for the onload. Wouldn't you be better doing it with event handlers? It would also not work if someone had set the onload attribute of the <body> tag.
Either way, not being picky, just seemed a little odd to me.
ok, I thought I would give this a shot, however I had to think of a different way to do it compared to everyone else's, so it's probably not the most ideal way (and certainly isn't accessible) however it is different and we all know kids that that's what matters! :P
Flame away! :) It's longer than other's (hell, that's what all the girls say!) but if you removed the comments it would be cut down a fair bit.HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>:: w00t ::</title>
<script type="text/javascript">
function monthGenerator(parentContainer, selectName, shortDateFormat) {
// parentContainer can be either a string or an object reference (required)
// selectName is the name attribute of the element (optional - default="month")
// shortDateFormat will output using 3 characters or the full name( optional - default=false;)
this.months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
this.date = new Date();
this.init = function(container, name, format) {
// allows the user to pass an object or an id string for the parent container
if (typeof(container)=="string")
container = document.getElementById(container);
// ok, if the string id was wrong or the element was null, we need to return a null value;
if (!container) return false;
// declare the variables required
var oSelect = document.createElement("select"), oOption, monthText;
// as this is a form element, it will need a name for submission, if none is given a default is set
oSelect.name = name?name:"month";
// loop through the months and append the month <option>'s
for (var monthIndex=0;monthIndex<this.months.length;monthIndex++) {
oOption = document.createElement("option");
monthText = this.months[(this.date.getMonth()+monthIndex)%this.months.length];
if (shortDateFormat) monthText = monthText.substr(0,3);
oOption.value = monthText;
// this should just be the .text property but thanks to IE, I need to do it differently
oOption.appendChild(document.createTextNode(monthText));
oSelect.appendChild(oOption);
if (!monthIndex) oOption.selected = true;
}
// finally add the select into it's container.
container.appendChild(oSelect);
// return a reference to our select
return oSelect;
}
// call the function to generate the select, returning either a null value or our select.
return this.init(parentContainer, selectName, shortDateFormat);
}
// I am declaring this as a global for this example, obviously it all depends on the scope of where you call it from.
// and in fact, if you are never going to reference the select again it's not needed at all.
var mySelect;
window.onload = function() {
mySelect = monthGenerator("container","mySelect",true);
}
</script>
</head>
<body>
<!-- the container for the select -->
<div id="container"></div>
<!-- a simple example showing that the referece was returned from the generation function -->
<input type="button" onclick="alert(mySelect.innerHTML)" value="click me!"/>
</body>
</html>
One annoyance with IE is that you can't set the .text property when dynamically adding content into an <option>, so that's why I used the createTextNode method. I could as easily used .innerHTML too but the DOM method looked a little nicer..
Edit: Tested on WinXP using FF2/IE6/Op9 without problems.
