DOM实现动态添加级联菜单

最新推荐文章于 2024-05-15 21:05:37 发布

yayun0516

最新推荐文章于 2024-05-15 21:05:37 发布

阅读量1.3k

点赞数

分类专栏： javaScript 文章标签： .appendChild .getElementsByTagNam javascript html

本文链接：https://blog.csdn.net/yayun0516/article/details/41626563

版权

javaScript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

.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>
    <title>下来列表级联效果编写</title>
    <style type="text/css">
        #reg{width:300px;height:50px;background:#fca;padding-top:5px;padding-left:10px}
    </style>
    <script type="text/javascript">
    function getDay(){
		var y = parseInt(document.getElementById("year").value);
		var m = parseInt(document.getElementById("month").value);
		var obj = document.getElementById("day");
		var rui = 0 ;
		var day = 0 ;
		
		if((y % 400 == 0 )||(y % 4 == 0 && y % 100 != 0 )){
			rui = 1;
		}
		switch(m){
			case 1:
			case 3:
			case 5:
			case 7:case 8:case 10:case 12:day = 3;
			break;
			case 4:case 6:case 9:case 11:day = 2;
			break;
			case 2: day = 0 ;
			break;
			
		}
		<span style="color:#ff0000;">while(obj.firstChild)
			obj.removeChild(obj.firstChild);//判断是否有一个孩子节点，有的话就清空。如果没这一句就会一直叠加</span>
		
		for(var i = 1 ; i <= 28 + rui + day ; i++){
			var option = document.createElement("option");
			option.innerText = i;
			obj.appendChild(option);
		}
		
    }
	
	function initYear(){
		/*var year = document.getElementById('year');
		var date = new Date();
		for(var i = 1900 ; i <= date.getFullYear(); i++){
			var option = document.createElement("option");
			option.innerText = i ; 
			year.appendChild(option);
		}*/
		
		
		
	}
    </script>
</head>
<body οnlοad="getDay()">
<form name="myForm">
<div id="reg" >
<table >
<tbody>
    
    <tr>
    <td>出生日期</td>
    <td><select id="year">
	<script type="text/javascript">
		var date = new Date();
		var str = "";
		for(var i = 1900 ; i <= date.getFullYear(); i++){
			str += "<option value='"+i+"' ";
			if( i == date.getFullYear()){
				str += " selected>"+i+"<option>";
			}else{
				str += ">"+i+"</option>";
			}
			document.write(str);
		}
	</script>
    </select>年<select οnclick="getDay()" id="month" >
   <script type="text/javascript">
	for(var i = 1 ; i <= 12 ; i++){
		document.write("<option value='"+i+"'>"+i+"</option>");
	}
   </script>
    </select >月<select id="day"></select>日</td>
    <td></td>
    </tr>
</tbody>
</table>
</div>
</form>
</body>
</html>

注意标红处。显示效果如下：

yayun0516

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM实现动态添加级联菜单

.html代码如下：下来列表级联效果编写 #reg{width:300px;height:50px;background:#fca;padding-top:5px;padding-left:10px} function getDay(){ var y = parseInt(document.getElementById("
复制链接

扫一扫

专栏目录