js实现二级月日联动菜单

时间：2018-04-11 23:01:25 阅读：274 评论：0 收藏：0 [点我收藏+]
直接上代码
<!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实现二级月日联动菜单
标签：++ AC cti name var meta log 获取修改
原文地址：https://www.cnblogs.com/chenmiaosong/p/8799053.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行