您的位置：首页 > Web前端 > JavaScript

js实现二级月日联动菜单

2018-04-11 22:03 134 查看
原文链接：http://www.cnblogs.com/chenmiaosong/p/8799053.html

直接上代码

<!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>

 

转载于:https://www.cnblogs.com/chenmiaosong/p/8799053.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航