直接上代码
<!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>
js实现二级月日联动菜单
原文地址:https://www.cnblogs.com/chenmiaosong/p/8799053.html