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

来源：互联网发布：数据结构与算法总结编辑：程序博客网时间：2024/04/28 08:14
用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 onload="ready()">    省份        <select id="province" onchange="showCity()">        <option>省份</option>            <option>广东</option>            <option>湖南</option>            <option>广西</option>        </select>        城市        <select id="city">        <option>城市</option>        </select>        <hr/>        <!--<input type="button" onclick="showYear()" value="添加"/>-->        年<select id="y" onchange="showMonth()">        <option>年份</option>        </select>        月<select id="m" onchange="showDay()">        <option>月份</option>        </select>        日<select id="d">        <option>日</option>        </select>            </body>        </html>
0 0