如何更改HTMLCollection中的selectBox的selectIndex？

Question

我正在尝试重置页面上所有selectBox的值。 有问题的事件发生在onClick中，因此所有内容都已加载到DOM中。

我已经通过var selectBoxes = document.getElementsByClassName("selectBox");获得了selectBoxes的HTMLCollection var selectBoxes = document.getElementsByClassName("selectBox"); 我现在想将每个selectBox的selectIndex更改为0。

但是，每次我尝试从HTMLCollection访问特定对象的属性时，都会得到一个未定义的值。

selectBoxes.item（0）.selectedIndex =未定义
selectBoxes [0] .selectedIndex =未定义

var selectBoxes = document.getElementsByClassName("filterBox");
  console.log(selectBoxes); //a nice JavaScriptObject
  for(i = 0; i < selectBoxes.length; i++){
      selectBoxes.item(i).selectedIndex = 0;
  }

这是一篇关于HTMLCollections的非常有趣的文章： https ://hackernoon.com/htmlcollection-nodelist-and-array-of-objects-da42737181f9，这似乎在解释我的问题的一部分。

Answer 1

我错误地访问了selectedIndex属性。 它不是selectBox本身的直接属性，而是似乎在selectBox的子级中。

  var selectBoxes = document.getElementsByClassName("filterBox");
  for(i = 0; i < selectBoxes.length; i++){
      selectBoxes.item(i).children[0].selectedIndex = 0;
  }