preventDefault放置位置疑问及两个Select组件禁用逻辑异常求助

我懂你现在的困扰——想实现「当prodSelect有选中值时，禁止修改calcSelect」，但现在遇到了反向逻辑的问题：当prodSelect清空后，calcSelect还是没法正常编辑。大概率是你只处理了「阻止修改」的逻辑，没做好「恢复可编辑」的反向触发，或者preventDefault的触发条件写得太绝对了。

给你两种靠谱的实现方案，优先推荐第一种，逻辑更清晰：

方案1：直接控制disabled属性（最直观，推荐） #

这种方式不需要用preventDefault，直接通过原生DOM属性控制组件的可用状态，用户一眼就能看出来能不能操作，体验更好：

// 获取两个select元素
const prodSelect = document.getElementById('prodSelect');
const calcSelect = document.getElementById('calcSelect');

// 监听prodSelect的选中变化，动态切换calcSelect的禁用状态
prodSelect.addEventListener('change', () => {
  // 当prodSelect有值时禁用calcSelect，否则启用
  calcSelect.disabled = prodSelect.value.trim() !== '';
});

// 页面初始化时先同步一次状态（避免页面加载时prodSelect已有值，但calcSelect还能改）
calcSelect.disabled = prodSelect.value.trim() !== '';

方案2：用事件阻止（适合特殊场景） #

如果你因为某些原因必须用preventDefault来阻止修改，那一定要注意只在符合条件时才触发阻止，空值时让事件正常执行：

const prodSelect = document.getElementById('prodSelect');
const calcSelect = document.getElementById('calcSelect');

// 处理calcSelect的下拉点击事件（阻止下拉展开）
calcSelect.addEventListener('mousedown', (e) => {
  // 只有prodSelect有值时，才阻止下拉
  if (prodSelect.value.trim() !== '') {
    e.preventDefault();
    // 可选：给用户提示，比如 alert('请先清空产品选择再修改计算项')
  }
});

// 处理calcSelect的change事件（防止通过键盘等方式修改）
calcSelect.addEventListener('change', (e) => {
  if (prodSelect.value.trim() !== '') {
    e.preventDefault();
    // 可以在这里把calcSelect重置回之前的值，避免用户看到错误的选中状态
    calcSelect.value = calcSelect.dataset.lastValue || '';
  } else {
    // 记录当前选中值，方便后续阻止时重置
    calcSelect.dataset.lastValue = calcSelect.value;
  }
});

// 初始化时记录初始值
calcSelect.dataset.lastValue = calcSelect.value;

为什么你之前的方案出问题？ #

大概率是你之前的代码里，要么是不管prodSelect有没有值都执行了preventDefault，要么是在prodSelect清空后没有移除阻止逻辑。比如如果错误地给calcSelect绑定了永久的阻止事件，即使prodSelect空了，事件还是会被阻止，自然没法修改。

优先用方案1，这种原生属性控制的方式最不容易踩坑，代码也更简洁。

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