Javascript:每次用户更改年份时，月份和日期中的日期都会重置

Question

我几乎想放弃我的日期选择器代码，哈哈。是否有任何带有 3 个下拉列表的日期选择器可以正常工作且完美的示例。我的库存已经有两天了，我认为我的日期选择器代码没有按我的预期工作。现在一切正常，除了它重置了我更改年份时已经选择的月份和日期的值。

例如:我选择年份 --> 1990 月份 -->02 日期 -->22

然后，当我更改为另一年时，月份和日期的值将被重置并变为 1，这不应该:

年份 --> 1991 月 -->1 日期 -->1

我想要的是，即使我在另一年或另一月进行更改，下拉列表也不会重置或变为 1。我应该重新编码它吗:-(。任何帮助将不胜感激。

function daysInMonth(m, y){
               return m===2?y&3||!(y%25)&&y&15?28:29:30+(m+(m>>3)&1);
            }

            var monthArray = []; 
            var dateArray = []; 
            function onYearChange() {
                monthArray =[];
                var year = document.getElementById("yeardialog").value
                    if (document.getElementById("yeardialog").value != "0"){
                        for(var i = 1 ; i<=12; i++){
                        monthArray.push(i + '');
                        dateArray.push(daysInMonth(i, year));
                    }

                var select = document.getElementById("monthdialog");
                    select.innerHTML = "";
                        for(var i = 0; i < monthArray.length; i++) {
                            var monthOptions = monthArray[i].replace('', '');
                            var el = document.createElement("option");
                                el.textContent = monthOptions + '';

                            if(monthOptions<10){
                                monthOptions = '0'+monthOptions
                            }
                                el.value = monthOptions;
                                select.appendChild(el);
                        }
                      onMonthChange();
            		console.log(monthArray);
    			}   
    		}

            function onMonthChange(){	
                if(dateArray.length>12){
                    dateArray.splice(0, 12);
                }
                var dates =[]; 
                var month = document.getElementById("monthdialog").value;
                var endDay = dateArray[month.replace('', '')-1];

                for(var date = 1; date<=endDay; date++){
                    dates.push(date + '');
                }

                var select = document.getElementById("datedialog");
                select.innerHTML = "";

                for(var i = 0; i < dates.length; i++) {
                    var dateOptions = dates[i].replace('', '');
                    var el = document.createElement("option");
                        el.textContent = dateOptions + '';

                    if(dateOptions<10){
                        dateOptions = '0'+dateOptions
                    }
                    el.value = dateOptions;
                    select.appendChild(el);
                }
            }

<select id="yeardialog" name="yeardialog" onchange="onYearChange()">
  <option value="">--</option>
  <option value="1990">1990</option>
  <option value="1991">1991</option>
  <option value="1992">1992</option>

</select>
<select id="monthdialog" onchange="onMonthChange()">
  <option></option>
</select>

<select id="datedialog">
  <option></option>
</select>

Answer 1

问题在于，当您更改更改日期列表的年份时，您正在重新创建月份列表。您可以重写整个过程来不执行此操作，或者您可以在重新创建列表之前存储当前选择的值，并在创建列表后再次选择它。

我想说的是，尽管所有年份都有相同的月份数，所以动态生成它并不是很有用。您真正感兴趣的唯一列表是日期列表，因此您可以编写它，以便更改年份或月份选择只会更改可用的日期(保存先前选择的值，如果您愿意，可以重新选择它(如果它有效))