当选择另一个select下拉框选项时，如何将目标select重置为disabled selected默认值？

我懂你遇到的这个问题了——当选中下拉框的某个选项后，再次点击它时，因为选项没变化，change事件不会触发，导致内容无法切换回去。而且你还希望只保留一个结果展示区域，下面是具体的实现方案：

核心思路 #

• 给每个下拉框绑定click事件，判断用户是否点击了当前已选中的选项，如果是，就重置下拉框到默认的disabled选中项；
• 用单个div统一展示所有选中后的内容，替代原来多个div显示/隐藏的方式，更简洁易维护。

修改后的完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
  <option value="" disabled selected> Select </option>
  <option value="red">Red Option</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
</Select>
<select name="testL" id="testL">
  <option value="" disabled selected> Select </option>
  <option value="20">test for 20</option>
  <option value="30">test for 30</option>
</select>
<!-- 唯一的结果展示容器 -->
<div id="result-display" class="result-content"></div>

CSS #

.result-content {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  min-height: 20px;
}

JavaScript #

$(function() {
  // 存储所有选项对应的展示内容，方便快速调用
  const contentMap = {
    red: 'red...',
    yellow: 'yellow..',
    blue: 'blue..',
    20: 'hello 20',
    30: 'hello 30'
  };

  // 处理下拉框重置逻辑：点击已选中的选项时，重置回默认状态
  $('select').on('click', function() {
    const $this = $(this);
    const currentVal = $this.val();
    // 延迟执行，确保能拿到点击后的选中值
    setTimeout(() => {
      const newVal = $this.val();
      // 如果点击的是当前已选中的非默认选项，重置回默认值
      if (newVal === currentVal && newVal !== '') {
        $this.val('');
      }
    }, 0);
  });

  // 颜色选择框的change事件处理
  $('#colorselector').change(function() {
    const selectedVal = $(this).val();
    // 更新结果展示内容
    $('#result-display').text(selectedVal ? contentMap[selectedVal] : '');
    // 可选：重置另一个下拉框的选中状态，避免界面混淆
    $('#testL').val('');
  });

  // 数字选择框的change事件处理
  $('#testL').change(function() {
    const selectedVal = $(this).val();
    // 更新结果展示内容
    $('#result-display').text(selectedVal ? contentMap[selectedVal] : '');
    // 可选：重置另一个下拉框的选中状态，避免界面混淆
    $('#colorselector').val('');
  });
});

关键逻辑说明 #

1. 下拉框重置：通过click事件配合setTimeout来判断用户是否点击了当前选中的选项。因为点击选项时，select的value会先更新，延迟执行才能准确对比点击前后的选中值，符合条件就重置回默认的空选项，这样下次再选该选项时就能触发change事件了。
2. 统一结果展示：用contentMap对象存储所有选项对应的文本，选中后直接更新单个结果div的内容，比原来多个div显示/隐藏的方式更高效，也符合你“仅需一个结果div”的要求。
3. 跨下拉框重置（可选）：在一个下拉框触发change时重置另一个的选中状态，避免界面上两个下拉框都有选中项的混淆情况，不需要的话可以删掉对应的val('')代码。

内容的提问来源于stack exchange，提问作者Yosra MH