选中第一个下拉框全部产品选项时，第二个select未禁用是什么原因？

问题原因 #

• 原生HTML没有isSelect属性，你绑定在option上的执行逻辑不会被触发，正确做法是给name为filterp的select标签绑定onchange事件，每次选项变动时判断当前选中值
• JS获取元素API拼写错误：正确方法为document.getElementById()，不需要末尾的s，id为页面唯一标识，不会返回多个元素
• 禁用逻辑写反：要禁用元素需要将disabled属性赋值为true，你写的false是启用状态
• 缺失反向恢复逻辑：未处理选中其他选项时重新启用第二个下拉框的场景

修复后完整代码 #

<form method="post" action="shop.php">
<select name='filterp' onchange="handleFilterChange()">
    <option defaultSelected>Please select an option</option>
    <option  value="allp">All Products</option>
    <option  value="milan">Products Milan</option>
    <option value="juve" >Products Juventus</option>
</select>

<script>
      function handleFilterChange()
      {
          const selectP = document.querySelector('select[name="filterp"]');
          const selectA = document.getElementById("A");
          // 选中All Products时禁用第二个下拉框，否则启用
          selectA.disabled = selectP.value === 'allp';
      }
     
  </script>

<select name="A" id="A">
    <option defaultSelected>Please select an option</option>
    <option id="mesh" value="mesh">mesh</option>
    <option  id="shorts" value="shorts">shorts</option>
    <option id="socks" value="socks">socks</option>
</select>
<input type="submit" value="Filter" id="filtrogo" >
</form>

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