如何让使用循环实现的Select下拉菜单EventListener符合预期运行

问题原因 #

你出现异常的核心原因是混淆了HTML属性（attribute）和DOM属性（property）的作用差异：

• checked作为HTML属性，仅控制单选按钮的初始选中状态，不会影响运行时的实际选中状态
• 单选按钮运行时的选中状态由DOM布尔属性checked控制，你用setAttribute/removeAttribute操作HTML属性，无法实时和实际选中状态同步，就会出现点击两次才生效、内容异常消失的问题。

你之前的硬编码版本只是恰好因为操作顺序触发了浏览器的属性同步，本质也是不规范的写法，只是碰巧能正常运行。

修正方案 #

因为同组单选按钮只要name属性一致，选中其中一个时浏览器会自动取消同组其他单选的选中状态，代码可以简化为：

const select = document.getElementById("location");

select.addEventListener("change", (e) => {
  const targetTab = document.getElementById(e.target.value);
  if (targetTab) targetTab.checked = true;
});

如果你需要保留遍历逻辑适配特殊业务场景，可以用下面的修正版：

const select = document.getElementById("location");

select.addEventListener("change", (e) => {
  const target = e.target.value;
  const venueTabs = document.querySelectorAll(".tabs__radio");
  for (let i = 0; i < venueTabs.length; i++) {
    // 直接操作DOM的checked属性，不要操作HTML属性
    venueTabs[i].checked = venueTabs[i].id === target;
  }
});

内容的提问来源于stack exchange，提问作者i-am-niall