如何修改HTMLCollection中selectBox的selectedIndex？解决属性undefined问题

嘿，我之前也碰到过类似的坑，来帮你捋清楚问题出在哪～

首先，你遇到的undefined问题大概率和HTMLCollection的特性或者遍历方式有关，咱们一步步排查：

1. 先确认你真的拿到了目标select元素 #

先在控制台敲console.log(selectBoxes.length)看看输出的数值：

• 如果是0，说明根本没找到对应元素：检查HTML里的select标签class是不是拼写正确（getElementsByClassName区分大小写，要和JS里的selectBox完全一致）；另外虽然你说DOM已加载，但如果是页面异步渲染的select（比如框架动态生成的），可能需要确保元素真正渲染后再执行代码。
• 如果数值大于0，那问题就出在遍历或访问元素的方式上。

2. 避开动态HTMLCollection的坑 #

getElementsByClassName返回的是动态HTMLCollection，它会实时同步DOM的变化，直接遍历容易出问题；而且如果用for...in遍历，会拿到集合的length、item这些额外属性，访问这些属性的selectedIndex自然会返回undefined。

最稳妥的办法是先把它转换成静态数组，再遍历：

// 方式1：用Array.from转成数组
const selectBoxes = Array.from(document.getElementsByClassName("selectBox"));
// 方式2：用扩展运算符
// const selectBoxes = [...document.getElementsByClassName("selectBox")];

// 遍历数组重置选中项
selectBoxes.forEach(select => {
  // 加个判断避免意外空元素
  if (select) {
    select.selectedIndex = 0;
  }
});

3. 检查代码拼写细节 #

你提到代码里写的是selectBoxes.item(0).selecte...，如果是selectedIndex没写完还好，但如果是拼写错误（比如少写了末尾的d），也会导致属性不存在返回undefined，这点可别忽略～

如果习惯用传统for循环，也可以这么写（提前存好length避免动态集合的影响）：

var selectBoxes = document.getElementsByClassName("selectBox");
const len = selectBoxes.length;
for (let i = 0; i < len; i++) {
  const select = selectBoxes[i];
  if (select) {
    select.selectedIndex = 0;
  }
}

这样应该就能顺利重置所有select的选中项啦～

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