如何更改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;
  }