JavaScript编写城市联动框和时间联动框

最新推荐文章于 2019-06-23 16:35:02 发布

没有能与不能只有想与不想

最新推荐文章于 2019-06-23 16:35:02 发布

阅读量917

点赞数

分类专栏： JavaScript-------------- DOM

本文链接：https://blog.youkuaiyun.com/yanghui07216/article/details/53442417

版权

JavaScript-------------- 同时被 2 个专栏收录

3 篇文章

订阅专栏

DOM

3 篇文章

订阅专栏

用JavaScript实现城市联动框时间的联动框：

要求：

年份：1900~今年
月份：1~12
日：根据每月算出对应的天数

代码：

<!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>
    	<script type="text/javascript">
			function showCity(){
				//维护一个二维数组存储省份对应的城市
				var citys = [[],["广州","佛山","中山"],["长沙","衡阳","岳阳"],["南宁","桂林","柳州"]];
				//获取省份对应的节点
				var provinceNode = document.getElementById("province");
				//获取省份选中的选项
				var selectIndex = provinceNode.selectedIndex;
				//获取对应的城市
				var cityDatas = citys[selectIndex];
				
				
				//找到city节点
				var cityNode = document.getElementById("city");
				
				//先清空city框的所有option
				//方法1：
				/*
				var children = cityNode.childNodes;
				for(var i =0 ; i < children.length ;){
					cityNode.removeChild(children[i]);
				}
				*/
				//方法2：设置options的个数
				cityNode.options.length = 1;
				//遍历对应的所有城市然后创建对应的option添加到city上；
				for(var index = 0 ; index < cityDatas.length ; index++){
					var option = document.createElement("option");
					option.innerHTML = cityDatas[index];
					cityNode.appendChild(option);
				}
			}
			
			function showYear(){
				var da = new Date();
				var year1 = parseInt(da.getFullYear());
				var yearNode = document.getElementById("y");
				yearNode.options.length = 1;
				for(var i = 1900 ; i <= year1 ; i++){
					var option = document.createElement("option");
					option.innerHTML = i.toString();
					yearNode.appendChild(option);
				}
			}
			
			function showMonth(){
				var monthNode = document.getElementById("m");
				monthNode.options.length = 1;
				for(var i = 1 ; i <= 12 ; i++){
					var option = document.createElement("option");
					option.innerHTML = i.toString();
					monthNode.appendChild(option);
				}
			}
			
			function showDay(){
				var days = [0,31,28,31,30,31,30,31,31,30,31,30,31];
				
				//var yNode = document.getElementById("y");
				//var yIndex = yNode.selectedIndex;
				//var yyyy = parseInt(yNode.options[yIndex].text);
				var yyyy = parseInt(document.getElementById("y").value);
				
				//var mNode = document.getElementById("m");
				//var mIndex = mNode.selectedIndex;
				//var mm = parseInt(mIndex);
				var mm = parseInt(document.getElementById("m").value);
				
				
				if((yyyy%4==0&&yyyy%100!=0)||yyyy%400==0){
					days[2] = 29;
				}
				else{
					days[2] = 28;
				}
				
				var dayNode = document.getElementById("d");
				dayNode.options.length = 1;
				for(var i = 1 ; i <= parseInt(days[mm]) ; i++){
					var option = document.createElement("option");
					option.innerHTML = i.toString();
					dayNode.appendChild(option);
				}
			}
function ready(){
    showYear();
   }		</script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>城市的联动框</title>
    </head>
    
    <body οnlοad="ready()">
    	省份
        <select id="province" οnchange="showCity()">
        	<option>省份</option>
            <option>广东</option>
            <option>湖南</option>
            <option>广西</option>
        </select>
        城市
        <select id="city">
        	<option>城市</option>
        </select>
        <hr/>
        <!--<input type="button" οnclick="showYear()" value="添加"/>-->
        年<select id="y" οnchange="showMonth()">
        	<option>年份</option>
        </select>
        月<select id="m" οnchange="showDay()">
        	<option>月份</option>
        </select>
        日<select id="d">
        	<option>日</option>
        </select>
        
    </body>
    
    
</html>