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。希望这会有所帮助。

选择onChange在Chrome上不起作用

1 个答案: