js实现二级月日联动菜单
直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现二级月日联动菜单</title> </head> <body> <form name="form1" method="post" action=""> 月： <select name="province" id="province" onchange="changeSelect(this.selectedIndex)"></select> 日： <select name="city" id="city"></select> </form> </body> </html> <script type="text/javascript"> var arr_province = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; var arr_city = [ ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日", "31日" ], ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日" ], ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日" ], ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日" ], ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日", "31日" ], ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日" ], ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日", "31日" ], ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日", "31日" ], ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日" ], ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日", "31日" ], ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日" ], ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日", "31日" ], ]; //网页加载完成，初始化菜单 window.onload = init; //传入函数地址 function init() { //首先获取对象 var province = document.form1.province; console.log(province); var city = document.form1.city; console.log(city); //指定省份中<option>标记的个数 province.length = arr_province.length; //循环将数组中的数据写入<option>标记中 for (var i = 0; i < arr_province.length; i++) { province.options[i].text = arr_province[i]; province.options[i].value = arr_province[i]; } //修改省份列表的默认选择项 var index = 0; province.selectedIndex = index; //指定城市中<option>标记的个数 city.length = arr_city[index].length; //循环将数组中的数据写入<option>标记中 for (var j = 0; j < arr_city[index].length; j++) { city.options[j].text = arr_city[index][j]; city.options[j].value = arr_city[index][j]; } } function changeSelect(index) { //选择对象 var city = document.form1.city; //修改省份列表的选择项 province.selectedIndex = index; //指定城市中<option>标记的个数 city.length = arr_city[index].length; //循环将数组中的数据写入<option>标记中 for (var j = 0; j < arr_city[index].length; j++) { city.options[j].text = arr_city[index][j]; city.options[j].value = arr_city[index][j]; } } var y = new Date().getFullYear(); //判断是否是闰年 function isLeapYear(year) { return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0); } var leapYear = isLeapYear(y) //如果是闰年就往二月份添加"29日" if (leapYear) { arr_city[1].push('29日'); } </script>
