javascript级联菜单(日历)

上次考DOM,考到级联菜单,迷迷糊糊,晕晕乎乎,不知从何下手。今天冷静下来,理了理思路。

要求:

  1. “年”或“月”发生变化且为有效值时,“日”下拉选择框显示相应的项。
  2.  “年”下拉选择框为初始状态时, “月”、“日”下拉选择框一定为初始状态。
  3. “月”下拉选择框为初始状态时, “日”下拉选择框一定为初始状态。

calender

思路:

1.  当前选框选项有变化的时候,操作下一个选框。当选择年份的时候,填充月份,选择月份的时候,根据所选月份填充日期。当年份为初始化状态,将月份和日期设置为初始化状态,月份为初始化状态时,将日期也设置为初始化状态。

2. 每年的月份数相同,但每个月的天数不同,将不同天数保存在数组中,方便相应月份调用。

3. 闰年2月与平年2月天数不同,分开判断。

上代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calendar</title>
</head>
<body style="text-align:center">
    <select name="year" id="year">
        <option value="0">--</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
    </select> 年
    <select name="month" id="month">
        <option value="0">--</option>
    </select> 月
    <select name="date" id="date">
        <option value="0">--</option>
    </select> 日
    
    <script>
        window.onload = initSelect;
        
        function initSelect(){
            var yearSel = document.getElementById('year');
            var monthSel = document.getElementById('month');
            
            initYear(); //设置年份默认选中第一个选项
            initMonth(); //设置月份默认选中第一个选项
            initDate(); //设置日期默认选中第一个选项
            yearSel.onchange = yearFun; //当年份被选择的时候调整月份
            monthSel.onchange = monthFun; //当月份被选择的时候调整日期
            
        }
        
        function yearFun(){
            if( this.options.selectedIndex === 0 ){ //如果选中第一个,把月,日设置为也选中第一个
                initMonth();
                initDate();
            }else{ //如果选中年份,填充月份
                popMonth();
            }
        }
        
        function monthFun(){
            var dateArr = [31,28,31,30,31,30,31,31,30,31,30,31]; //储存不同月份天数的数组
            var thisValue = parseInt(this.options[this.options.selectedIndex].value); //获取当前选中的选项的值并转为数字
            
            if( this.options.selectedIndex === 0 ){ //如果选中第一个选项,初始化日期
                initDate();
            }else{ //如果选中其他选项,根据选项加载不同日期
                document.getElementById('date').options.length = 1;
                var isLeap = checkLeap(); //要使用函数返回值,可以保存为变量,或直接使用
                if ( isLeap ){
                    dateArr[1] = 29;
                }else{
                    dateArr[1] = 28;
                }
                for( var i = 0; i < dateArr[thisValue-1]; i++ ){ //根据选中选项的value值查找date数组中对应的天数值,循环出来
                    document.getElementById('date').options[i+1] = new Option( i+1 ); //因为第一个选项是横线,所以要+1,从第二个开始
                };
            }
        }
        
        function popMonth(){
            initDate(); //填充月份的时候初始化日期
            for( var i = 0; i < 12; i++ ){
                document.getElementById('month').options[i+1] = new Option(i+1,i+1); //填充月份,设置内容和值
            }
        }
        
        function checkLeap(){ //判断选中年份是否为闰年
            var yearSel = document.getElementById('year');
            var thisYearValue = parseInt(yearSel.options[yearSel.options.selectedIndex].value); //获取当前选中年份的值并转为数字
            if( (thisYearValue % 4  === 0 && thisYearValue % 100 !== 0) || thisYearValue % 400 === 0 ){ //闰年:能被4整除的同时不能被100整除,或者能被400整除,只要满足两者之一就是闰年
                return true;
            }
            return false;
        }
        
        function initYear(){
            document.getElementById('year').options.selectedIndex = 0; //设置年份选中第一个选项
        }
        
        function initMonth(){
            document.getElementById('month').options.selectedIndex = 0; //设置月份选中第一个选项
            document.getElementById('month').options.length = 1; //只保留第一个选项
        }
        
        function initDate(){
            document.getElementById('date').options.selectedIndex = 0; //设置日期选中第一个选项
            document.getElementById('date').options.length = 1; //只保留第一个选项
        }
    </script>
</body>
</html>

查看DEMO

1. select.options.selectedIndex 可以获取到被选中选项的index值。

2. new Option( ), 创建新的option

3. 函数的返回值可以保存为变量:

function myFunction()
{
var x=5;
return x;
}

可以保存为变量:

var myVar=myFunction();
console.log(myVar);

也可以直接使用:

document.getElementById("demo").innerHTML=myFunction();


Leave a Reply

Your email address will not be published. Required fields are marked *

*