时间戳

首页 > 解决方案 > 在不同的下拉选择中清除输入值

javascript - 在不同的下拉选择中清除输入值

问题描述

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

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

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

标签： javascriptjquery

解决方案

为了实现您需要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

推荐阅读