클라이언트 단에서 셀렉트 박스의 옵션 값이 변경될 때 마다
특정 작업을 수행하도록 만들려는 경우가 있다.
셀렉트박스 옵션 변경 감지 ('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() 로 강제 이벤트 발생시킴
'JavaScript' 카테고리의 다른 글
JavaScript 자바스크립트 객체의 key 존재여부 확인하기 (0) | 2023.06.25 |
---|---|
JavaScript 자바스크립트 객체명.key로 value에 접근시 key에 '.' (점)이 포함되어 있는 경우 (0) | 2023.06.17 |
JS 자바스크립트 값 비교 시 주의사항 (비교연산자 == 와 === 차이 등) (0) | 2023.05.29 |
JS 자바스크립트 이벤트 핸들러 중첩 제어 / .off() / 이벤트 핸들러 중복 제어 (0) | 2023.05.14 |
JavaScript 자바스크립트 동적으로 생성된 태그에 클릭 이벤트 동작하지 않을 때 (jQuery 제이쿼리) (0) | 2023.02.26 |
최근댓글