Question

我有一个小的数字下拉列表，范围是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行的日期选择器。

Answer 1

您不需要2个侦听器。您可以做的是，在change上重置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>

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

1 个答案: