[JavaScript] JavaScript trigger change 사용 방법

자바스크립트에서 select 태그를 사용했을 때, 사용자의 조작없이 자동으로 값이 변하게 할 때 사용하는 것이 trigger change다. 이번 글에서는 trigger change를 어떻게 사용하는 지에 대해 글을 작성한다.

---

목차

1. trigger change 사용 방법

---

1. trigger change 사용 방법

trigger change를 사용하는 방법은 정말 간단하다. 사용할 때의 시나리오를 먼저 정하면, 화면에서 조회하는 검색 조건에 따라 결과가 달라지는 것에 대해 적용하려고 한다.

 

일단, HTML에서 SELECTID의 name과 ID를 가진 SELECT 태그에 값을 변경할 경우 changeSELECTID() 함수를 타서 로직을 태우려고 한다.

<select name="SELECTID" id="SELECTID" onChange="changeSELECTID()">
	<option value="TEST01">TEST01</option>
    <option value="TEST02">TEST02</option>
</select>

 

그래서, 아래와 같이, DOM이 완전하게 불러지면, 값을 임의로 바꿀 때 사용하는 것이 trigger('change')와 같다.

$(document).ready(function(){
	$("#SELECTID").val("TEST01").trigger('change'); // TEST01
    $("#SELECTID").val("TEST02").trigger('change'); // TEST02
}

 

DOM이 불러오면, SELECTID의 value를 변경하고, .trigger('change')를 사용하여 값을 변경할 수 있다.

---