Beginning JavaScript | 18
  
[previous] [next] |
Beginning JavaScript
Select Element Events
Select elements have three event handlers, onblur, onfocus, and onchange. We've seen all these events before. We saw the onchange event with the text box element, where it fired when focus was moved away from the text box and the value in the text box had changed. Here it fires when the user changes which option in the list is selected.
Try It Out  Using the Select Element for Date Difference Calculations
Let's take a look at an example that uses the onchange event and makes good use of the select element in its drop-down list form. Its purpose is to calculate the difference, in days, between two dates as set by the user via drop-down list boxes.
<script language="JavaScript">
function writeOptions(startNumber, endNumber)
{
var optionCounter;
for (optionCounter = startNumber; optionCounter <= endNumber; optionCounter++)
{
document.write('<OPTION value=' + optionCounter + '>' + optionCounter);
}
}
function writeMonthOptions()
{
var theMonth;
var monthCounter;
var theDate = new Date();
for (monthCounter = 0; monthCounter < 12; monthCounter++)
{
theDate.setMonth(monthCounter);
theMonth = theDate.toString();
theMonth = theMonth.substr(4,3);
document.write('<OPTION value=' + theMonth + '>' + theMonth);
}
}
function recalcDateDiff()
{
var myForm = document.form1;
var firstDay = myForm.firstDay.options[myForm.firstDay.selectedIndex].value;
var secondDay =
myForm.secondDay.options[myForm.secondDay.selectedIndex].value;
var firstMonth =
myForm.firstMonth.options[myForm.firstMonth.selectedIndex].value;
var secondMonth =
myForm.secondMonth.options[myForm.secondMonth.selectedIndex].value;
var firstYear =
myForm.firstYear.options[myForm.firstYear.selectedIndex].value;
var secondYear =
myForm.secondYear.options[myForm.secondYear.selectedIndex].value;
var firstDate = new Date(firstDay + " " + firstMonth + " " + firstYear);
var secondDate = new Date(secondDay + " " + secondMonth + " " + secondYear);
var daysDiff = (secondDate.valueOf() - firstDate.valueOf());
daysDiff = Math.floor(Math.abs((((daysDiff / 1000) / 60) / 60) / 24));
myForm.txtDays.value = daysDiff;
return true;
}
function window_onload()
{
var theForm = document.form1;
var nowDate = new Date();
theForm.firstDay.options[nowDate.getDate() - 1].selected = true;
theForm.secondDay.options[nowDate.getDate() - 1].selected = true;
theForm.firstMonth.options[nowDate.getMonth()].selected = true;
theForm.secondMonth.options[nowDate.getMonth()].selected = true;
theForm.firstYear.options[nowDate.getFullYear()- 1970].selected = true;
theForm.secondYear.options[nowDate.getFullYear() - 1970].selected = true;
}
</script>
Call the example ch6_examp9.htm and load it into your Web browser. You should see the form below, but with both date boxes set to the current date.
If you change any of the select boxes, then the difference between the days will be recalculated and shown in the text box.
|
[previous] [next] |
and
Created: February 7, 2001
Revised: February 7, 2001
Created: February 7, 2001
Revised: February 7, 2001
URL: http://webreference.com/programming/javascript/beginning/chap6/
Find a programming school near you
