当前位置:文档之家› js联动菜单下拉菜单日历方法

js联动菜单下拉菜单日历方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>
<HEAD>
<script type="text/javascript" src="js/calendar.js"></script> </HEAD>
<BODY>
<h1>下拉式日历</h1>
<form>
<select id="sltYear" onchange="choiseMon();">
<option value=0>2004</option>
<option value=1>2005</option>
<option value=2>2006</option>
<option value=3>2007</option>
<option value=4>2008</option>
<option value=5>2009</option>
<option value=6>2010</option>
<option value=7>2011</option>
<option value=8>2012</option>
<option value=9>2013</option>
<option value=10>2014</option>
<option value=11>2015</option>
</select>
<select id="sltMon" onchange="choiseDay();">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select id="sltDay">
</select>
</form>
</body>
</html>
以上是页面代码部分
function $(id){
return document.getElementById(id); }
function choiseDay(){
var year=$("sltYear");
var month=$("sltMon");
var day=$("sltDay");
var arr=new Array();
for(var i=0; i<4 ; i++){
var ar=new Array();
for(var j=1; j<=28+i ; j++){
ar.push(j);
}
arr.push(ar);
}
var val=year.value;
var n=7;
var mindex=month.selectedIndex;
switch(mindex){
case 0:
case 2:
case 4:
case 6:
case 7:
case 9:
case 11:
n=3;
break;
case 3:
case 5:
case 8:
case 10:
n=2;
break;
case 1:
if(val%4==0){
n=1;
}else{
n=0;
}
break;
}
while(day.childNodes.length>0){
day.removeChild(day.firstChild);
}
for(var i=0 ; i<arr[n].length; i++){
var node=document.createElement("option");
node.innerHTML=arr[n][i];
day.appendChild(node);
}
}
以上是js代码。

相关主题