JavaScript Select 변경 이벤트 처리하기

이번에 프로젝트를 진행하면서 javascript를 이용하여 Select를 변경에 따른 이벤트를 처리하는 작업이 필요했다.

총 3개의 Select에 변경 이벤트를 달아주어야 했는데, 다음과 같이 해결할 수 있었다.

  var aList = document.querySelector('#aList');
  var bList = document.querySelector('#bList');
  var cList = document.querySelector('#cList');

  var change_event = function(){
    console.log('변경됨');
  };
  aList.onchange = change_event;
  bList.onchange = change_event;
  cList.onchange = change_event;

 [설명]

  var aList = document.querySelector('#aList');
  var change_event = function(){
    console.log('클릭됨');
  };
  aList.onchange = change_event;

1) 웹 상에서 aList라는 id값을 가진 녀석을 aList라는 변수에 담는다. (HTML에서 select 태그에 해당하는 부분)

2) change_event라는 이름의 함수를 만들어준다.

3) aList의 onchange를 change_event라는 함수로 동작하도록 설정해준다.

이제 function 안에 원하는 작업을 해주면 되겠다.

[선택된 요소의 텍스트가 얻어오고 싶다면]

aList.options[aList.selectedIndex].innerText;