자바스크립트 트리거를 활용해 셀렉트박스 선택 값 변경
안녕하세요.
고코더 입니다.
자바스크립트로 프론트를 개발할때 특정 조건에 맞쳐 셀렉트 박스를 변경해야 하는 경우가 있습니다.
이때 사용자 대신 셀렉트 박스를 변경하고 싶다면 트리거를 사용하면 됩니다.
● 1.우선 아래 예제를 함께 살펴보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function triggerChagne(){ $("#gocoder").val('g').trigger('change'); } </script> </head> <body> <select id="gocoder"> <option value="">셀렉트박스 선택</option> <option value="g">Go</option> <option value="c">Coder</option> </select> </body> </html> | cs |
gocoder_triggerSelect.html● 1.해당 파일을 실행하면 화면과 같은 모습이 보입니다. 버튼을 클릭하면
● 2.왼쪽 select box 가 변경 됩니다.
$("#gocoder").val('g').trigger('change');
이 명령어가 해당 value 값을 가진 박스로 선택해주기 때문입니다.
트리거를 활용하면 chage 이벤트로 바인딩 됩니다.
마무리
트리거만 잘사용해도 편합니다.
'IT_Developers > Javascript' 카테고리의 다른 글
| jQuery - select 선택 값 변경시 trigger(), prop() 차이는? (0) | 2019.10.17 |
|---|---|
| jQuery - prop()으로 select 상태 값 변경 (0) | 2019.10.17 |
| jQuery - 가장 간단한 슬라이드 HTML / Coin Slider (2) | 2019.07.17 |
| 자바스크립트 - location.href 와 location.replace 차이점 (0) | 2019.07.15 |
| console.log - 콘솔 로그 스타일 입히기 (0) | 2019.07.11 |
댓글