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

Question

У меня есть форма с полем ввода даты.После поля даты появляется выпадающий список, в котором вы можете выбрать время.Я хотел бы добавить некоторые опции раскрывающегося списка, если дата установлена ​​на определенный день недели.

Это моя форма:

HTML-код из небольшой части формы:

<div class="col_half travel-date-group nnvo">
    <label for="datum">Datum <small>*</small></label>
    <input type="text" id="datum" name="datum" class="sm-form-control tleft disabled-week today" placeholder="DD-MM-JJJJ">
</div>
            
<div class="col_half col_last nnvo">
  <label for="tijdstip">Tijdstip <small>*</small></label>
  <select id="tijdstip" name="tijdstip" class="sm-form-control" style="height: 40px;">
    <option value="">-- Kies een tijd --</option>
    <option value="10:00">10:00</option>
    <option value="10:30">10:30</option>
    <option value="11:00">11:00</option>
    <option value="11:30">11:30</option>
    <option value="12:00">12:00</option>
    <option value="12:30">12:30</option>
    <option value="13:00">13:00</option>
    <option value="13:30">13:30</option>
    <option value="14:00">14:00</option>
    <option value="14:30">14:30</option>
    <option value="15:00">15:00</option>
    <option value="15:30">15:30</option>
    <option value="16:00">16:00</option>
    <option value="16:30">16:30</option>
    <option value="17:00">17:00</option>
    <option value="17:30">17:30</option>
  </select>
</div>

Я думаю, что я должен использовать AJAX, чтобы получить значение из поля 'datum', а затем добавить опцию к входу 'tijdstip'.Но я понятия не имею, как этого добиться.

РЕДАКТИРОВАТЬ: у меня теперь есть этот код, который теперь добавляет параметр со значением «Тест», если я выберу 18-09-2018.Но затем, если я выберу другую дату, это значение не будет удалено.

  function changeTimeOptions(){
      dateInputValue = document.getElementById('datum').value;
      if (dateInputValue == "18-09-2018") {

          var x = document.getElementById("tijdstip");
          var option = document.createElement("option");
          option.text = "Test";
          x.add(option);

      }
  }

Я попробовал следующее, но безуспешно:

else if (dateInputValue ==! "18-09-2018") {
    x.remove(option);
}

Answer 1

Я думаю, будет работать только javascript:

В поле ввода даты добавьте onchange = "changeTimeOptions ()" https://www.w3schools.com/jsref/event_onchange.asp

скрипт может прочитать введенную дату:

dateInputValue = getElementById('datum').value

В зависимости от этого значения вы можете изменить Select-Tag:

x = document.getElementById('IdOfTimeInput');
x.remove(1); ' Index

или

x.add("12:30"); 

https://www.w3schools.com/jsref/met_select_remove.asp https://www.w3schools.com/jsref/met_select_add.asp

---

EDIT:

См. Код ниже. Это не тестет. Проблема в вашем коде в том, что в другом случае х не определен (вы определили его в предложении if). Также «опция» не определена. Вы должны просмотреть все внутри и сравнить текст. Если совпадение, уберите опцию.

попробуйте это:

function changeTimeOptions(){
      dateInputValue = document.getElementById('datum').value;
      var x = document.getElementById("tijdstip");

      if (dateInputValue == "18-09-2018") {
          var option = document.createElement("option");
          option.text = "Test";
          x.add(option);
      } else if (dateInputValue ==! "18-09-2018") {
            for (var i=0; i<x.length; i++){
                 if (x.options[i].text == 'Test' ){
                      x.remove(i);
                      i--; //You killed one option, so the length of x is one less
                 }   
            }   
      }
}

возможно изменить x.options [i] .text на x.options [i] .innerHTML.

Answer 2

Вы можете сделать ajax вызов html-страницы после перечисления в событие onchange или onkeypress. Если требуемая дата установлена. Сделайте ajax-запрос для сбора данных для тега select.