Java Reference
In-Depth Information
Select Element Events
Select elements have three event handlers, onblur, onfocus, and onchange. You've seen all these
events before. You saw the change event with the text box element, where it fi red when focus was
moved away from the text box and the value in the text box had changed. Here it fi res 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 change 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 set by the
user via drop-down list boxes.
<!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>
<title>Chapter 7: Example 8</title>
<script type=”text/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(1);
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;
Search WWH ::




Custom Search