자바스크립트에서 select 태그에 onchange 이벤트를 사용할 수 있습니다. 그런데 onchange 이벤트가 동작하지 않는 경우가 발생할 수 있는데요... 그 원인과 해결방법을 알아봅니다.

onchange가 select 태그에 바로 동작하지 않는 경우는 select 태그를 클릭해서 값을 선택하지 않고 select 태그의 value 프로퍼티의 값을 스크립트를 사용하여 업데이트 하는 경우입니다. 예를들어...
<select onchange="updated()">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

위 값을 변경하는 경우를 예를 들면...  DOM 클릭이 아닌 스크립트를 아래처럼 사용한다고 생각해봅니다.
document.querySelector('select').value = '2';

이 경우 updated()라는 함수가 동작하지 않습니다. 그 이유는 onchange 이벤트는 해당 엘리먼트의 blur 여부에 따라 동작하기 때문입니다.


! 해결방법은 ?
해결 방법은 onchange() 함수를 해당 DOM에 추가하여 사용하면 됩니다. 즉 select의 값을 업데이트하고 함수를 연이어 동작하면 되는 거죠.
document.querySelector('select').value = '2';
document.querySelector('select').onchange();

위와 같이 코드를 적용하면 updated()라는 함수가 뒤따라 실행하게 됩니다.