如果前一个日期输入具有特定值,则添加选择选项

时间:2018-09-13 11:05:54

标签: javascript php jquery html ajax

我有一个带有日期输入字段的表格。在日期字段之后,有一个选择下拉列表,您可以在其中选择时间。如果日期设置为一周的某天,我想添加一些选择下拉选项。

这是我的表格:
This is my form

表单中一小部分的HTML代码:

    Sub Mail_workbook_Outlook_1()

    Dim OutApp As Object
    Dim OutMail As Object

    Set OutApp = CreateObject("Outlook.Application")
    Set OutMail = OutApp.CreateItem(0)

    On Error Resume Next
    With OutMail
        .to = "Nabil.Hure@dnb.no"
        .CC = ""
        .BCC = ""
        .Subject = "Trades Today" & Date
        .Body = "Please find today's trade report attached."
        .Attachments.Add ActiveWorkbook.FullName
    End With
    On Error GoTo 0

    Set OutMail = Nothing
    Set OutApp = Nothing
End Sub

我认为我应该使用AJAX从“基准”字段中获取值,然后在“ tijdstip”输入中添加一个选项。但是我不知道如何实现这一目标。

编辑: 我现在有了这段代码,如果我选择18-09-2018,它现在会添加一个值为'Test'的选项。但是,如果我选择另一个日期,它不会删除该值。

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

我确实尝试了以下方法,但是没有任何运气:

  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);

      }
  }

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

我认为仅使用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


编辑:

请参见下面的代码。它不是睾丸。您的代码中的问题是,在else情况下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。