javascript - 如果我在之前的选择中选择了一个选项，则删除输入字段

Question

我有这个选择，并且我希望如果我选择选项值=“2”，则发货日期的下一个输入字段会消失

<div class="form-group">
<label for="reason">Reden van storing</label>
<select id="reason" name="reason" class="form-control">
<option value="1">Tijdelijk niet leverbaar</option>
<option value="2">Uit assortiment, niet meer leverbaar</option>
<option value="3">Minder artikelen beschikbaar</option>
</select>
</div>

<div class="form-group">
<label>Shipment date</label>
<input type="date" name="shipment_date" required="" class="form-control" placeholder="Vul verzenddatum in">
</div>

Answer 1

使用事件监听器来访问页面加载并选择更改

注意我给了 div 一个 ID

普通 JS

window.addEventListener("load",function() {
  document.getElementById("reason").addEventListener("change",function() {
    document.getElementById("shipmentDiv").style.display = this.value==="2" ? "none": "block"
  })
  document.getElementById("reason").dispatchEvent(new Event('change')); // in case it was selected at load time
})

<div class="form-group">
  <label for="reason">Reden van storing</label>
  <select id="reason" name="reason" class="form-control">
    <option value="1">Tijdelijk niet leverbaar</option>
    <option value="2" selected>Uit assortiment, niet meer leverbaar</option>
    <option value="3">Minder artikelen beschikbaar</option>
  </select>
</div>

<div class="form-group" id="shipmentDiv">
  <label>Shipment date</label>
  <input type="date" name="shipment_date" required="" class="form-control" placeholder="Vul verzenddatum in">
</div>

jQuery切换

$(function() {
  $("#reason").on("change",function() {
    $("#shipmentDiv").toggle(this.value!=="2")
  }).change()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="reason">Reden van storing</label>
  <select id="reason" name="reason" class="form-control">
    <option value="1">Tijdelijk niet leverbaar</option>
    <option value="2" selected>Uit assortiment, niet meer leverbaar</option>
    <option value="3">Minder artikelen beschikbaar</option>
  </select>
</div>

<div class="form-group" id="shipmentDiv">
  <label>Shipment date</label>
  <input type="date" name="shipment_date" required="" class="form-control" placeholder="Vul verzenddatum in">
</div>