Javascript 使用下拉列表切换日期选择器的数量_Javascript_For Loop_Input_Datepicker_Addeventlistener

Javascript 使用下拉列表切换日期选择器的数量

javascript for-loop input

Javascript 使用下拉列表切换日期选择器的数量,javascript,for-loop,input,datepicker,addeventlistener,Javascript,For Loop,Input,Datepicker,Addeventlistener,我有一个从0到4的数字小下拉列表，我可以添加更多，例如，数字4是4年的数据。如果选择4，则会得到4行日期选择器，供用户选择开始日期和结束日期它使用for循环，并且可以工作，但问题是我不能用下拉菜单重做日期选择器的数量这是我的密码。注意，我使用的是Python Flask，因此表单action={{url\u for。。否则，它将形成aciton=某个url链接 <!DOCTYPE html> <html> <head> <title>Da

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

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

这是我的密码。注意，我使用的是Python Flask，因此表单action={{url\u for。。否则，它将形成aciton=某个url链接

<!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.addEventListenerchange…但这可以阻止下拉菜单/列表显示超过最大4行的日期选择器。

您不需要两个侦听器。您可以做的是，在更改时重置HTML并添加所选数目的日期选择器

var res=document.queryselector； var select=document.querySelectorselect； var loopList=document.getElementByIdloop-list； res.textContent=所选值：+select.Value； select.addEventListenerchange，函数E{ res.textContent=所选值：+select.Value； var length=parseIntselect.value； loopList.innerHTML=；//重置将添加日期选择器的HTML标记如果长度！=0{ 对于变量i=0；i谢谢Prerak！现在效果非常好：很乐意帮助：