分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

js实现二级月日联动菜单

发布时间:2023-09-06 01:49责任编辑:郭大石关键词: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>

js实现二级月日联动菜单

原文地址:https://www.cnblogs.com/chenmiaosong/p/8799053.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved