js实现二级月日联动菜单

Posted 松哥1204

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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实现二级月日联动菜单的主要内容，如果未能解决你的问题，请参考以下文章

asp 二级联动菜单

利用JS实现一个简单的二级联动菜单

PHP+ajax实现二级联动菜单功能

使用Javascript来实现二级联动菜单的效果

Excel 如何实现五级下拉菜单联动

js年月日联动菜单