如果先前的日期输入具有特定值，则添加选择选项

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 从“基准”字段中获取值，然后在“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

您可以在列出 onchange 事件或 onkeypress 事件后对 html 页面进行 ajax 调用。 如果设置了所需的日期。 发出 ajax 请求以收集 select 标签的数据。

Answer 2

我认为只有 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

---

编辑：

请参阅下面的代码。它不是睾丸。您的代码中的问题是，在其他情况下 x 未定义（您在 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。