Toggle Количество средств выбора даты с раскрывающимся списком

У меня есть небольшой выпадающий список чисел от 0 до 4 (я мог бы добавить больше), например. номер 4 — это данные за 4 года. Если я выберу 4, я получу 4 строки выбора даты, чтобы пользователь мог выбрать дату начала и окончания.

Он использует цикл for и работает, но проблема в том, что я не могу изменить количество средств выбора даты с помощью раскрывающегося меню.

Вот мой код. Обратите внимание, что я использую Python Flask, поэтому форма action="{{url_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.addEventListener("change"... но это необходимо для того, чтобы в раскрывающемся меню/списке не отображалось более максимального количества 4 строк средств выбора даты.

javascript for-loop input datepicker addeventlistener

11.03.2019 18:36

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для этого вам не нужно 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>

Спасибо Прерак! Теперь работает отлично :)

— 11.03.2019 18:45

Рад помочь :)

— 11.03.2019 18:46

11.03.2019 18:43