城市联动日期联动是个很常用的功能，实现起来也各式各样，下面记录一个比较清楚简单的方法，以备今后查询。
1.城市联动
a.js代码部分：
1 <head> 2 <title></title> 3 <script type="text/javascript"> 4 function addProvince() 5 { 6 var prov = document.getElementById("province"); 7 var provs = ["河南", "河北", "山西", "新疆"]; 8 prov.length = 0; 9 for (var i=0;i<provs.length ; i++) 10 { 11 var op = document.createElement("option"); 12 op.value = provs[i]; 13 op.innerHTML = provs[i]; 14 prov.appendChild(op); 15 } 16 addCity(); 17 } 18 function addCity() 19 { 20 var city = document.getElementById("city"); 21 var cities = [ 22 ["郑州市","洛阳市","开封市","南阳市"], 23 ["石家庄市","邯郸市","保定市"], 24 ["太原市","大同市","晋城市","运城市"], 25 ["乌鲁木齐市","吐鲁番地区","哈密","昌吉"] 26 ]; 27 var provIndex = document.getElementById("province").selectedIndex; 28 city.length = 0; 29 for (var i=0; i<cities[provIndex].length; i++) 30 { 31 var op = document.createElement("option"); 32 op.value = cities[provIndex][i]; 33 op.innerHTML = cities[provIndex][i]; 34 city.appendChild(op); 35 } 36 } 37 </script> 38 </head>
b.<body>中代码部分：
1 <body onload="addProvince()"> 2 <center> 3 <form method="post" > 4 省份：<select id="province" onchange="addCity()"> 5 </select> 6 城市：<select id="city"> 7 </select> 8 </form> 9 </center> 10 </body>
2.日期联动：
a.js代码部分:
1 <head> 2 <title></title> 3 <script type="text/javascript"> 4 function addOption() 5 { 6 for (var i=0; i<10; i++) 7 { 8 document.getElementById("year").options[i] = new Option(1990+i, 1990+i); 9 } 10 11 for (var i=1; i<=12; i++) 12 { 13 document.getElementById("month").options[i-1] = new Option(i, i); 14 document.getElementById("month").options[0].selected = true; 15 } 16 } 17 function changeOption() 18 { 19 var yearIndex = document.getElementById("year").selectedIndex; 20 var year = document.getElementById("year").options[yearIndex].value; 21 var monthIndex = document.getElementById("month").selectedIndex; 22 var month = document.getElementById("month").options[monthIndex].value; 23 var isLeap = ((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0)); 24 if (isLeap && (month == 2)) 25 { 26 for (var i=1; i<=29; i++) 27 { 28 document.getElementById("day").options[29] = null; 29 document.getElementById("day").options[30] = null; 30 document.getElementById("day").options[i-1] = new Option(i, i); 31 } 32 } 33 if (!isLeap && (month == 2)) 34 { 35 for (var i=1; i<=28; i++) 36 { 37 document.getElementById("day").options[28] = null; 38 document.getElementById("day").options[29] = null; 39 document.getElementById("day").options[30] = null; 40 document.getElementById("day").options[i-1] = new Option(i, i); 41 } 42 } 43 if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) 44 { 45 for (var i=1; i<=31; i++) 46 { 47 document.getElementById("day").options[i-1] = new Option(i, i); 48 } 49 } 50 if (month == 4 || month == 6 || month == 9 || month == 11) //判断是否为非2月 51 { 52 for (var i=1; i<=30; i++) 53 { 54 document.getElementById("day").options[30] = null; 55 document.getElementById("day").options[i-1] = new Option(i, i); 56 } 57 } 58 } 59 </script> 60 </head>
b.<body>中代码部分：
1 <body onload="addOption();changeOption()"> 2 <form action="" method="post" > 3 <select id="year" size="1" onchange="changeOption()"> 4 <option></option> 5 </select>年 6 <select id="month" size="1" onchange="changeOption()"> 7 <option></option> 8 </select>月 9 <select id="day" size="1"> 10 <option></option> 11 </select>日 12 </form> 13 </body>
上面是年月日的三级联动和省市的二级联动的一个示例，也可以用json等实现，后面再说。