级联

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function ShowYear(){
for(i=1990;i<2021;i++){
var yearOp=new Option(i,i);
document.getElementById("year").options.add(yearOp);
}
for(i=1;i<=12;i++){
var monthOp=new Option(i,i);
document.getElementById("month").options.add(monthOp);
}
}
function SelectMonth(){
var getMonthNum=document.getElementById("month").value;
var getYearNum=document.getElementById("year").value;
var dayNum=0;
if(getMonthNum==1||getMonthNum==3||getMonthNum==5||getMonthNum==7||getMonthNum==8||getMonthNum==10||getMonthNum==12){
dayNum=31;
    }else if(getMonthNum==2){
dayNum=28;
if (getYearNum%400==0) dayNum=29;
}
else{
dayNum=30;
}
document.getElementById("day").options.length=0;
for(i=1;i<=dayNum;i++)
{
var dayOp=new Option(i,i);
   document.getElementById("day").options.add(dayOp);
}
}
</script>
</head>
<body onload="ShowYear()">
   年:
   <select id="year">
   </select>
   月:
   <select id="month" onchange="SelectMonth()">
   </select>
   日:
   <select id="day">
   </select>
   
</body>
</html>
================================================================
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
  var province=new Array("湖北省","湖南省");
  // var province =["湖北省","湖南省"];
   province["湖北省"]=new Array("孝感市","武汉市","天门市");
   province["湖南省"]=new Array("长沙市","韶山市","岳阳市");
   function ShowProvince(){
//  alert("1");
  for(i=0;i<province.length;i++){
  var proOp=new Option(province[i],province[i]);
  document.getElementById("pro").options.add(proOp);
  } 
   }
   
   function ShowCity(){
  var pro=document.getElementById("pro").value;
  //alert(pro);
  document.getElementById("city").length=0; //先清空city
  for(i=0;i<province[pro].length;i++){
  var cityOp=new Option(province[pro][i],province[pro][i]);
  document.getElementById("city").options.add(cityOp);
  }
   }
   
   
</script>
</head>
    
<body onload="ShowProvince()">
省:
<select id="pro" onchange="ShowCity()">
</select>
市:
<select id="city">
</select>
</body>
</html>
原文地址:https://www.cnblogs.com/blogLYF/p/5653983.html