how to render an option value dynamic !

[Gianni]

I have to insert in a html select the last 10 years

<select name="year" onChange="month()" size=5>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>

I did this way. I d like to do it dynamically in javascript but I have
no idea how to insert the result of a function in an option value.
Please help
Gianni

 

[rf]

I have to insert in a html select the last 10 years

<select name="year" onChange="month()" size=5>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>

I did this way. I d like to do it dynamically in javascript but I have
no idea how to insert the result of a function in an option value.

You have already written it. Why do you want to now automate it?

 

[kaeli]

I have to insert in a html select the last 10 years

<select name="year" onChange="month()" size=5>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>

I did this way. I d like to do it dynamically in javascript but I have
no idea how to insert the result of a function in an option value.
Please help
Gianni

This sort of thing is best done with server-side scripting in case the
client doesn't have javascript enabled. I have this very thing in JSP,
though it's the last 5 years, this year, and the next 2.

As to using javascript, you wouldn't insert the result of a function.
You'd build the entire select element dynamically. Which, might I add,
would not work in old browsers like NN4, either.

Is this for an intranet application where you can know all browsers
accessing your application? If not, you'd really be better off using a
server-side script to dynamically build the html.

If you still want to use javascript and having it work only in DOM
browsers is okay by you, let me know and I'll post some code for you.

--
--
~kaeli~
Murphy's Law #2000: If enough data is collected, anything
may be proven by statistical methods.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[Dag Sunde]

You have already written it. Why do you want to now automate it?

Eh... 2005?


Here's one way to do it:

Put <div id='tenYearsComboLayer'></div> on the page where you want your
combo.

then execute the following code in the page's onload() event:

function drawTenYearCombo(){

var comboLayer = document.getElementById('tenYearsComboLayer');
var buffer = "<select name='year' onChange='month();' size='5'>";

var now = new Date();
var thisYear = now.getFullYear();

for( var n=10; n>0; n--)
buffer += "<option value='" + (thisYear - n) + "'>" + (thisYear - n) +
"</option>";

buffer += "</select>";
comboLayer.innerHTML = buffer;

}

 

[Dag Sunde]

Here's one way to do it:

Put <div id='tenYearsComboLayer'></div> on the page where you want your
combo.

then execute the following code in the page's onload() event:

function drawTenYearCombo(){

var comboLayer = document.getElementById('tenYearsComboLayer');
var buffer = "<select name='year' onChange='month();' size='5'>";

var now = new Date();
var thisYear = now.getFullYear();

for( var n=10; n>0; n--)
buffer += "<option value='" + (thisYear - n) + "'>" + (thisYear - n) +
"</option>";

buffer += "</select>";
comboLayer.innerHTML = buffer;

err.... that for-loop should of course read:
for( var n=10; n>=0; n--)

 

[Mick White]

I have to insert in a html select the last 10 years

<select name="year" onChange="month()" size=5>
<option value="1994">1994</option> .....
<option value="2004">2004</option>
</select>

I did this way. I d like to do it dynamically in javascript but I have
no idea how to insert the result of a function in an option value.

<form>
<select name="year">
</select>
</form>

<script type="text/JavaScript">
function fillYearMenu(menu,from,to){
menu.length=0;z=to-from;
for(s=from;s<=to;s++){
menu.options[menu.options.length]=new Option(s+":
"+(z-menu.options.length)+" years ago",s);
}
}

fillYearMenu(document.forms[0].year,1994,2004)
</script>

http://www.mickweb.com/demo/years.html
Mick

</script>

The menu must exist for the function to work, and you'd need some error
checking if your parameters will be provided by user entry.

 

[Gianni]

This sort of thing is best done with server-side scripting in case the
client doesn't have javascript enabled. I have this very thing in JSP,
though it's the last 5 years, this year, and the next 2.

As to using javascript, you wouldn't insert the result of a function.
You'd build the entire select element dynamically. Which, might I add,
would not work in old browsers like NN4, either.

Is this for an intranet application where you can know all browsers
accessing your application? If not, you'd really be better off using a
server-side script to dynamically build the html.

If you still want to use javascript and having it work only in DOM
browsers is okay by you, let me know and I'll post some code for you.

--

I d like to use javascript ... at the moment it seems easier !
what else I have to do is to show the months of the year up to the
corrent month. Can you help me in that too?
Ciao
Gianni

 

[kaeli]

I d like to use javascript ... at the moment it seems easier !

That's debatable.
I find it a lot easier in JSP personally.

what else I have to do is to show the months of the year up to the
corrent month. Can you help me in that too?

Tested in NN7 and IE6 only. No assumptions should be made for other
browsers - test in them if you want to check. Watch for word-wrappping.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" language="javascript">

function createYearSelect(parentElement, insertBeforeNode)
{
if (! document.getElementById || !document.createElement)
{
alert("Sorry, your browser doesn't support this operation.");
return;
}

var s = document.createElement("select");
s.id = "year";
s.name = "year";
parentElement.insertBefore(s, insertBeforeNode);

var today = new Date();
var thisYear = today.getYear();
if (thisYear < 2000) thisYear = thisYear + 1900;

for (var i=10; i>=0; i--)
{
var o = document.createElement("option");
o.name = "o"+i;
o.id = "o"+i;
o.value = (thisYear-i);
o.appendChild(document.createTextNode(thisYear-i));
s.appendChild(o);
}

// attach onchange event to select
if (s.attachEvent)
{
s.attachEvent("onchange",editMonths);
}
else if (s.addEventListener)
{
s.addEventListener("change",editMonths,false);
}
}

function editMonths()
{
var monthArray = new Array
("January","February","March","April","May","June","July","August","Sept
ember","October","November","December");
// make months select depending on value of elementToCheck (year
select element)
// if it's already there, remove it and re-create

frm = document.forms["f1"];
elementToCheck = document.forms["f1"].elements["year"];

if (! document.getElementById || !document.createElement)
{
alert("Sorry, your browser doesn't support this operation.");
return;
}

if (document.getElementById("month"))
frm.removeChild(document.getElementById("month"));

// get the value of the first select
var val = elementToCheck.options[elementToCheck.selectedIndex].value;

// make month select element
var s = document.createElement("select");
s.name = "month";
s.id = "month";
frm.insertBefore(s, elementToCheck);

// fill in month select element with all months IF the selected year
is prior to this year
// OR with the months up to this month if the current year is
selected
var L;

var today = new Date();
var thisYear = today.getYear();
if (thisYear < 2000) thisYear = thisYear + 1900;
if (val == thisYear) L = today.getMonth();
else L = 11;

for (var i=0; i<=L; i++)
{
var o = document.createElement("option");
o.name = "o"+i;
o.id = "o"+i;
o.value = monthArray;
o.appendChild(document.createTextNode(monthArray));
s.appendChild(o);
}
}

</script>
</head>

<body onLoad="createYearSelect(document.forms['f1'], document.forms
['f1'].elements['sub']);editMonths();">
<form id="f1" name="f1" action="" method="">
<br>
<input id="sub" name="sub" type="submit" value="submit">
</form>
</body>
</html>

--

 

[Dr John Stockton]

JRS: In article <[email protected]>, seen in

var today = new Date();
var thisYear = today.getYear();
if (thisYear < 2000) thisYear = thisYear + 1900;

I have heard that there are browsers for which that will not work
correctly, since for 1997 to 2001 their getYear() gives 97,98,99,00,01 .

For mortals,
var thisYear = 2000 + today.getYear()%100
may thus be better.


The following is expected to be safe on any browser :

function getFY(D) { var YE
YE = Math.round(D.getTime() / 31556952000) + 1970
return YE + (D.getYear()-YE)%100 }

but needs testing. Note that the constants on the middle line do not
need to be exact, if I have reasoned correctly. The code returns the
last two figures of getYear(), as part of a number which is not far from
YE, and YE is a close approximation to the correct result.

See <URL:http://www.merlyn.demon.co.uk/js-date1.htm#gY>
and <URL:http://www.merlyn.demon.co.uk/js-date1.htm#gFY>

 

[Thomas 'PointedEars' Lahn]

I d like to use javascript ... at the moment it seems easier !

You *can* use JavaScript, just do not use it client-side on a Web site.
Easier is not necessarily better, and the client-side solution is worse
here compared to the server-side one.


PointedEars