Select事件侦听器在forEach循环中不起作用

Question

Select event listener doesn't work inside a forEach loop.

This is for input styling when a user selected a value a input tag would be disable.

 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")
    });
  });

I expect select event would work inside that loop.

Answer 1

Since you're working with a select element, perhaps you intended to use the change event ? The select event is for selecting text in a text input.

If you did mean to use the select event, then you probably want to iterate over the array of input elements rather than the array of select elements.

Answer 2

Try using change event:

 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>