如何为下拉选择框绑定change事件并条件阻止其更新？

我明白你遇到的困扰了——event.preventDefault()在<select>的change事件里没法阻止选中状态的变更，因为这个事件是在选项已经完成选中切换之后才触发的，调用它根本来不及回滚状态。

咱们换个思路：提前记录上一次选中的选项，当检测到用户选中了带no-update类的选项时，手动把选择框恢复到之前的选中状态，同时给出提示。

完整实现代码 #

<select id="my_select">
  <option class='no-update'>Option 1</option>
  <option>Option 2</option>
</select>

// 保存上一次选中的选项
let prevSelected = $('#my_select option:selected');

$('#my_select').change(function(event) {
  const currentSelected = $(this).find(":selected");
  
  // 检查当前选中项是否带有禁止更新的类
  if (currentSelected.hasClass('no-update')) {
    // 恢复到上一次选中的选项
    prevSelected.prop('selected', true);
    alert('Unfortunately this option cannot be selected!');
  } else {
    // 更新保存的选中项
    prevSelected = currentSelected;
  }
});

关键细节说明 #

• 记录历史选中项：初始化时先获取默认选中的选项，之后每次用户选择合法选项时，更新这个记录。
• 手动恢复选中状态：当检测到禁止选中的选项时，通过prop('selected', true)强制把选择框切回之前的选项，这样就能达到“阻止更新”的效果。
• 提示用户：恢复状态后弹出提示，让用户明白为什么操作没生效。

这样修改后，就能实现你想要的“特定条件下阻止选择框更新”的需求啦。

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