在不同的下拉选择中清除输入值答案

【问题标题】：Clear input values upon different dropdown selection在不同的下拉选择中清除输入值
【发布时间】：2020-08-16 23:48:13
【问题描述】：

我有这个下拉列表，在选择一个名为“回调”的值时，会出现两个输入框，我可以在其中输入日期和时间。如果我再次从下拉列表中选择不同的值，则会隐藏两个输入框。

我的问题是当两个输入框在选择不同的值时消失时，我希望它清除输入的日期和时间。有人可以展示如何做到这一点吗？

$(document).ready(function() {
  $('#Callback').hide();
  $("#lead_status").change(function() {
    $('#Callback').hide('slow');
    $("#" + this.value).show('slow');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Lead Status</label>
  <select name="lead_status" id="lead_status" class="btn btn-secondary dropdown-toggle">
    <option value="Interested">Interested</option>
    <option value="Not Interested">Not Interested</option>
    <option value="Hung Up">Hung Up</option>
    <option value="Call Got Disconnected">Call Got Disconnected</option>
    <option value="Callback">Callback</option>
  </select>
  <div id="Callback">
    <br/>
    <label for="callback_date">Callback Date:</label>
    <input type="date" name="callback_time" class="form-control" />
    <br />
    <label for="callback_time">Callback Time:</label>
    <input type="time" name="callback_time" class="form-control" />
  </div>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

为了达到您的要求，在您切换的内容中的隐藏输入上设置val('')。

jQuery($ => {
  let $callback = $('#Callback');

  $("#lead_status").change(function() {
    $callback.hide('slow', function() {
      $(this).find('input').val('')
    });
    $("#" + this.value).show('slow');
  });
});

#Callback {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Lead Status</label>
  <select name="lead_status" id="lead_status" class="btn btn-secondary dropdown-toggle">
    <option value="Interested">Interested</option>
    <option value="Not Interested">Not Interested</option>
    <option value="Hung Up">Hung Up</option>
    <option value="Call Got Disconnected">Call Got Disconnected</option>
    <option value="Callback">Callback</option>
  </select>
  <div id="Callback">
    <br />
    <label for="callback_date">Callback Date:</label>
    <input type="date" name="callback_time" class="form-control" />
    <br />
    <label for="callback_time">Callback Time:</label>
    <input type="time" name="callback_time" class="form-control" />
  </div>

还要注意在上面的例子中#Callback元素默认使用CSS而不是JS隐藏，这样你就可以避免FOUC

【讨论】：

谢谢，但我的系统有问题。默认情况下，页面加载时会显示回调时间和日期字段
你添加了我在示例中显示的那行 CSS 吗？
是的，我确实使用了 css，但在页面加载时它没有隐藏
使用 DOM 检查器检查元素上的 CSS 并确保规则足够具体，可以覆盖元素上的任何其他样式。
你说得对，它是压倒一切的，非常感谢@Rory 的帮助。