gpt4 book ai didi

javascript - javascript中的appendChild重复下拉列表的值

转载 作者:行者123 更新时间:2023-12-03 09:30:19 25 4
gpt4 key购买 nike

我正在开发我的日期下拉选择器。我有 3 个下拉菜单用于选择年、月和日。我为此使用了 javascript。当我选择年份时运行该程序,然后 javascript 将在我的月份下拉列表中附加月份[1'2,3,4,5 等]。当我选择一个月(例如 2-->二月)时,它只会在我的日期下拉列表中附加 28 天。它工作得很好,但问题是每次我换到新的一年时,我的月份下拉列表的值都会重复以及以天为单位。

示例:

     year dropdown --- I choose 1970
month dropdown ----- [1,2,3,4,5,6,7,8,9,10,11,12]
dates dropdown ----[1-31]

当我选择另一年时:

     year dropdown --- I choose 1972
month dropdown ----- [1,2,3,4,5,6,7,8,9,10,11,12, 1,2,3,4,5,6,7,8,9,10,11,12]
dates dropdown ----[1-31]

正如您所看到的,我的月份下拉列表中的值仅重复。

我的代码如下:

 
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() {
$(this).parent().remove();
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");
for(var i = 0; i < monthArray.length; i++) {
var monthOptions = monthArray[i];
var el = document.createElement("option");
el.textContent = monthOptions;
el.value = monthOptions;
select.appendChild(el);
}
}
}

function onMonthChange(){


var dates =[];
var month = document.getElementById("monthdialog").value;
var endDay = dateArray[month-1];

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

var select = document.getElementById("datedialog");
for(var i = 0; i < dates.length; i++) {
var dateOptions = dates[i];
var el = document.createElement("option");
el.textContent = dateOptions;
el.value = dateOptions;
select.appendChild(el);
}
}
  <select id="yeardialog" name="yeardialog" onchange="onYearChange()">
<option value=""> -- </option>
{for $i = 1970; $i <= 2015; $i++ }
<option value={$i} >{$i}</option>
{/for}
</select>

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

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

<div id="message">

</div>

非常感谢任何帮助。谢谢。

最佳答案

每次用户更改年份时清除月份选择框:

var select = document.getElementById("monthdialog");
select.innerHTML = ""; // <= Clear options like this and then add optons
for(var i = 0; i < monthArray.length; i++) {
var monthOptions = monthArray[i];
var el = document.createElement("option");
el.textContent = monthOptions;
el.value = monthOptions;
select.appendChild(el);
}

片段:

function onYearChange() {
var select = document.getElementById('monthdialog');
select.innerHTML = "";
for (var i = 0; i < 12; i++) {
var el = document.createElement("option");
el.textContent = i;
el.value = i;
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>

关于javascript - javascript中的appendChild重复下拉列表的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31529577/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com