我有一个小的下拉列表，其中包含从 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/