JavaScript select 자바스크립트 셀렉트박스 제어 (옵션 값 변경 감지, 선택된 옵션 value & text 값 얻기, change 이벤트 강제 발생)

 

클라이언트 단에서 셀렉트 박스의 옵션 값이 변경될 때 마다

 

특정 작업을 수행하도록 만들려는 경우가 있다.

 

셀렉트박스 옵션 변경 감지 ('change') 이벤트 핸들러 (정적 & 동적 셀렉트박스 모두 적용)

/* jQuery 제이쿼리 */
$(document).on('change', '션택자', function(e) {
  $(this).val(); // 변경된 옵션의 value 값
  $(this).text(); // 변경된 옵션의 text 값
  // 이벤트 발생 시 수행할 코드...
});

/* 바닐라 JS (순수 자바스크립트) */
document.addEventListener('change', function(e) {
  var target = e.target;
  if (target.matches('선택자')) {
    var selectedValue = target.value; // 변경된 옵션의 value 값
    var selectedText = target.options[target.selectedIndex].text; // 변경된 옵션의 text 값
    // 이벤트 발생 시 수행할 코드...
  }
});

 

추가로 사용자가 화면상에서 직접 셀렉트박스의 옵션을 조작해서

 

이벤트를 발생시키는 방법 외에 JS 코드로 강제로 이벤트를 발생 시킬 수 있다.

 

셀렉트 박스 'change' 이벤트 강제로 발생 시키기

/* jQuery 제이쿼리 */
$('선택자').trigger('change'); // 제이쿼리의 .trigger() 메서드로 이벤트를 발생시킴

/* 바닐라 JS (순수 자바스크립트) */
var selectElement = document.querySelector('선택자');
var event = new Event('change'); // 이벤트 생성
selectElement.dispatchEvent(event); // 자바스크립트 표준 메서드인 .dispatchEvent() 로 강제 이벤트 발생시킴