Переключить число сборщиков даты с выпадающего списка - PullRequest
Новая
       30

Переключить число сборщиков даты с выпадающего списка

0 голосов
/ 11 марта 2019

У меня есть маленький выпадающий список чисел от 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 («изменить» ... но это нужно для того, чтобы в раскрывающемся меню / списке не отображалось больше, чем максимальное количество из 4 строк средств выбора даты.

1 Ответ

1 голос
/ 11 марта 2019

Вам не нужны 2 слушателя для этого.Что вы можете сделать, так это сбросить HTML-код на change и добавить выбранное количество указателей даты. 

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>
...