选择 onChange 在 Chrome 上不起作用

Question

我主要使用 Mozilla，但现在我注意到某些代码没有在 Chrome 上运行，例如带有 eventListener 的 select>option。

这是页面的链接：https://musing-jang-0e572c.netlify.com/senate-data.html 在 Chrome 和 Mozilla 上查看。

我希望这部分也适用于 Chrome。我怎样才能做到这一点？

cbs = document.querySelectorAll("input[type=checkbox]");
selector = document.querySelectorAll("#selector option");

(function() {
  targets = document.querySelectorAll("#table tr td:nth-child(3)");
  newTr = document.querySelectorAll("#table tr");
  for (var z = 0; z < cbs.length; z++) {
    cbs[z].addEventListener("change", function() {
      targets = document.querySelectorAll("#table tr td:nth-child(3)");
      newTr = document.querySelectorAll("#table tr");
      console.log(newTr);
      console.log(targets);
    })
  }
  // DA FIXARE OPTION => CHECKBOX NEW
  for (l = 0; l < selector.length; l++) {
    selector[l].addEventListener("click", function() {
      for (var i = 0; i < targets.length; i++) {
        //console.log(i);
        newTr[i].classList.add("hide-row");
        if (targets[i].innerHTML == this.value && newTr[i].classList.contains("hide-row")) {
          //console.log("Match: " + i);
          newTr[i].classList.remove("hide-row");
        } else if (this.innerHTML === "ALL"){
          for (let i = 0; i < targets.length; i++) {
            newTr[i].classList.remove("hide-row");
          }
        }
      }
    });
  }
  for (var p = 0; p < cbs.length; p++) {
    cbs[p].addEventListener("change", function() {
      console.log("Checkbox");
    })
  }
})();

Answer 1

从语义上讲，我们不应该将 "click" 侦听器添加到选项标签。 <select> 标记有一个 "change" 事件，您可以收听该事件，然后在 <option> 更改时进行适当的更改。

请参考这个MDN link。希望这会有所帮助。