gpt4 book ai didi

javascript - Toggle 带有下拉列表的日期选择器的数量

转载 作者:行者123 更新时间:2023-12-03 00:02:38 32 4
gpt4 key购买 nike

我有一个小的下拉列表,其中包含从 0 到 4 的数字(我可以添加更多),例如数字 4 是 4 年的数据。如果我选择 4,我会得到 4 行日期选择器,供用户选择开始和结束日期。

它使用 for 循环,并且可以工作,但问题是我无法使用下拉菜单重做日期选择器的数量。

这是我的代码。请注意,我使用的是 Python Flask,因此形式为 action="{{url_for.."否则它将是 aciton = "some url link.."

<!DOCTYPE html>
<html>
<head>

<title>Dates</title>
</head>
<body>


<form action="{{url_for('home')}}">
<ul id = "loop-list">

</ul>

<input type="submit">
</form>

<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Change value of the select to show the value.
<p>
</p>


<script type="text/javascript">


var res = document.querySelector("p");
var select = document.querySelector("select");

var length;

var loopList = document.getElementById("loop-list");

var unselect = document.getElementById("loop-list");


res.textContent = "Selected Value: " + select.value;

var boolean = false;
var currentSelect;

select.addEventListener("change", function(e){
res.textContent = "Selected Value: " + select.value;

currentSelect = select.value;
length = parseInt(select.value);


if(boolean == false & length !=0){
for(var i =0; i < length; i++){

loopList.innerHTML += "<li>Date " + (i+1) +
" <input type='date' name='bday' max='2018-10-01'>Enter a date<input type='date' name='bday' min='2019-12-31'></li><br>";


}
boolean = true;

}

});

unselect.addEventListener("change", function(w){

res.textContent = "Selected Value: " + unselect.value;

length = parseInt(unselect.value);


if(boolean == true & length != 0){

for(var i = 0; i < length; i++){

loopList.innerHTML -="<li>Date " + (i+1) +
" <input type='date' name='bday' max='2018-10-01'>Enter a date<input type='date' name='bday' min='2019-12-31'></li><br>";

}
boolean = false;
}
});

</script>
</body>
</html>

如果我有 4 行日期选择器;分别开始和结束日期,如何通过重用下拉菜单将其切换为仅显示 3,2,1 或 0 行日期选择器?

希望我的问题措辞正确。任何帮助将不胜感激。我确信这是相对简单的事情。您可以删除 unselect.addEventListener("change"... 但这是为了阻止下拉菜单/列表显示超过 4 行日期选择器的最大数量。

最佳答案

为此您不需要 2 个监听器。您可以做的是,在更改上重置 HTML 并添加选定数量的日期选择器。

var res = document.querySelector("p");
var select = document.querySelector("select");

var loopList = document.getElementById("loop-list");

res.textContent = "Selected Value: " + select.value;

select.addEventListener("change", function(e) {
res.textContent = "Selected Value: " + select.value;

var length = parseInt(select.value);
loopList.innerHTML = ""; //Reset the HTML tag where date pickers will be added

if (length != 0) {
for (var i = 0; i < length; i++) {
loopList.innerHTML += "<li>Date " + (i + 1) +
" <input type='date' name='bday' max='2018-10-01'>Enter a date<input type='date' name='bday' min='2019-12-31'></li><br>";
}
}
});
<form>
<ul id="loop-list"></ul>
<input type="submit">
</form>

<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Change value of the select to show the value.
<p></p>

关于javascript - Toggle 带有下拉列表的日期选择器的数量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55107440/

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