如何在jQuery中当日/月/年选默认值时清空所有下拉选框值

我来帮你搞定这个问题！你的代码逻辑存在一点小偏差，导致无法达到预期效果，咱们一步步修正它：

你的核心需求是：

• 当任一下拉框被切换到默认空值时，清空所有下拉的选中状态，并清空隐藏输入框
• 当三个下拉框都选择了非默认值时，将拼接后的日期写入隐藏输入框

但原代码的问题在于：只要三个下拉中有任一为空（比如用户刚选了Day，Month还没选），就会触发重置逻辑，这导致用户无法正常逐步选择下拉选项，直接被强制重置回去，所以看起来代码“未生效”。

HTML（保持原有结构不变） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="date-dropdowns">
  <input type="hidden" id="acf-field_5a7cbdad4e6af-0-field_5a7b65d4e90ca-field_5a7b665f779f4" name="acf[field_5a7cbdad4e6af][0][field_5a7b65d4e90ca][field_5a7b665f779f4]" value="" required="required">
  <select class="day" name="date_[day]">
    <option value="">Day</option>
    <option value="01">1st</option>
    <option value="02">2nd</option>
    <option value="03">3rd</option>
    <option value="04">4th</option>
  </select>
  <select class="month" name="date_[month]">
    <option value="">Month</option>
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
  </select>
  <select class="year" name="date_[year]">
    <option value="">Year</option>
    <option value="2018">2018</option>
    <option value="2017">2017</option>
    <option value="2016">2016</option>
    <option value="2015">2015</option>
    <option value="2014">2014</option>
    <option value="2013">2013</option>
  </select>
</div>

JavaScript（修正核心逻辑） #

$('.date-dropdowns').on('change', '.day,.month,.year', function() {
  const $container = $(this).parent();
  const currentSelectedVal = $(this).val();
  
  // 只有当用户主动将当前下拉切换为默认空值时，才重置所有选项
  if (currentSelectedVal === "") {
    $container.find('select').val('');
    $container.find('input[type=hidden]').val('');
    return;
  }
  
  // 获取三个下拉框的当前值
  const dayVal = $container.find('.day').val();
  const monthVal = $container.find('.month').val();
  const yearVal = $container.find('.year').val();
  
  // 仅当三个选项都选择了非默认值时，更新隐藏输入框
  if (dayVal !== "" && monthVal !== "" && yearVal !== "") {
    const formattedDate = `${dayVal}/${monthVal}/${yearVal}`;
    $container.find('input[type=hidden]').val(formattedDate);
  } else {
    // 未完成选择时，清空隐藏输入框（可根据需求调整）
    $container.find('input[type=hidden]').val('');
  }
});

1. 重置条件精准化：只有当用户主动把某一个下拉切换到空值时，才执行全重置操作，避免用户逐步选择时被强制重置。
2. 隐藏输入更新逻辑优化：仅当三个下拉都选好非空值时，才写入拼接后的日期；未完成选择时保持隐藏输入为空，符合表单校验逻辑。
3. 性能优化：缓存父容器$container，减少重复DOM查询操作。

• 场景1：选择Day=01 → 隐藏输入框为空（Month/Year未选）
• 场景2：再选择Month=01 → 隐藏输入框仍为空（Year未选）
• 场景3：再选择Year=2018 → 隐藏输入框被设置为01/01/2018
• 场景4：将Month切换回默认空值 → 所有下拉重置为默认，隐藏输入框清空

这样就完全符合你的需求啦！

内容的提问来源于stack exchange，提问作者Dean Junior