DOM：document object model 文档对象模型
示例：显示年、月、日的三级关联下拉菜单
<html>
<head>
<title>这是一个DOM测试网页</title>
<script language="javascript">
function init()
{
var year=document.getElementById("year");
year.options.add(new Option("--年--"));
for(var i=2000;i<=2018;i++)
{
year.options.add(new Option(i,i));
}
var month=document.getElementById("month");
month.options.add(new Option("--月--"));
for(var i=1;i<=12;i++)
{
month.options.add(new Option(i,i));
}
}
//根据年和月判断对应天数
function setDay()
{
year=document.getElementById("year").value;
month=document.getElementById("month").value;
var data=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var days=data[month-1];
if((year%4==0&&year%100!=0)||(year%400==0))
{
if(month==2)
{
days++;
}
}
day.options.length=0; //先清空select，将options的length设为0，防止每次的日期都被保留，否则会访问几次会下拉几个月日期
for(var i=1;i<=days;i++)
{
day.options.add(new Option(i,i));
}
}
</script>
</head>
<body onload="init()">
<select id="year" onchange="setDay()"> //onchange根据年设置日期
</select> 年
<select id="month" onchange="setDay()"> //onchange根据月设置日期
</select> 月
<select id="day">
</select> 日
</body>
</html>
执行结果1
执行结果2
