Select事件偵聽器在forEach循環中不起作用

Question

Select事件偵聽器在forEach循環中不起作用。

當用戶選擇一個值時，這將用於輸入樣式，輸入標簽將被禁用。

 var listOfSelect = document.querySelectorAll('select');
  var listOfInput = document.querySelectorAll('input');

  listOfSelect.forEach(function(element) {
    element.addEventListener('focus', function () {
      element.style.backgroundColor = "white";
    });
    element.addEventListener('blur', function () {
      element.style.backgroundColor = "#F0F0E7";
    });
    element.addEventListener('select', function () {
      console.log("OK")
    });
  });

我希望select事件可以在該循環內工作。

Answer 1

由於您正在使用select元素，也許您打算使用change事件 ？ select事件用於在文本輸入中選擇文本。

如果確實要使用select事件，那么您可能要遍歷輸入元素的數組而不是選擇元素的數組。

Answer 2

嘗試使用更改事件：

 var listOfSelect = document.querySelectorAll('select'); var listOfInput = document.querySelectorAll('input'); listOfSelect.forEach(function(element) { console.log(element); $(document).on('change', element, function() { element.style.backgroundColor = "blue"; }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option value=''>--select--</option> <option value='1'>1</option> <option value='2'>3</option> <option value='3'>3</option> </select>