如何在用户选择Chemex时禁用Size下拉选择框

AI 小北

2026-10-17

实现方案

1. 调整HTML（可选，推荐）

给咖啡类型下拉框添加类名、给Chemex选项补充value值，方便后续JS获取元素和判断选中状态，修改后的对应代码如下：

<!-- 咖啡类型下拉框部分 -->
<td>
   <select class="coffee-type">
       <option value="Espresso">Espresso</option>
       <option value="Cappuccino">Cappuccino</option>
       <option value="Americano">Americano</option>
       <option value="Pour over">Pour over</option>
       <option value="Chemex" class="Chemex" id="Chemex">Chemex</option>
   </select>
</td>

如果不想修改原有HTML，这一步可以跳过，直接用下方的兼容版JS代码即可。

2. 添加JS事件监听逻辑

把下面的代码放在页面</body>标签之前，或者在DOM加载完成的回调中执行：

// 获取尺寸下拉框元素
const sizeSelect = document.querySelector('.size');
// 如果你完成了第一步的HTML调整，用这个获取咖啡下拉框
const coffeeTypeSelect = document.querySelector('.coffee-type');
// 如果你没修改HTML，就注释掉上面一行，用下面这行通过层级选择器获取
// const coffeeTypeSelect = sizeSelect.parentElement.nextElementSibling.querySelector('select');

// 给咖啡类型下拉框绑定change事件
coffeeTypeSelect.addEventListener('change', function() {
    // 如果你给option加了value，用这个判断选中状态
    const isChemexSelected = this.value === 'Chemex';
    // 如果你没改option的value，就注释掉上面一行，用选项文本内容判断
    // const selectedText = this.options[this.selectedIndex].text.trim();
    // const isChemexSelected = selectedText === 'Chemex';

    // 控制尺寸下拉框的禁用状态
    sizeSelect.disabled = isChemexSelected;
});