728x90
반응형
JavaScript - change 이벤트 처리하는 방법
자바스크립트의 onchange() 이벤트는 셀렉트 박스의 값이 변경될 때 자주 사용합니다.
selectbox의 옵션을 클릭할 때! 즉, 값이 변경될 때 onchange() 이벤트에서 사용자가 지정한 함수를 호출하여 사용할 수 있습니다.
문법 1
우선 HTML 태그에 직접 onchange를 명시하여 호출하는 방법을 알아보도록 하겠습니다.
select 태그에 onchage를 아래와 같이 붙이게 되면 option값이 선택될 때 해당 함수 f_changeFunc(this) 가 호출됩니다.
<html>
<head>
// ...
</head>
<body>
<select onchange="f_changeFunc(this)">
<option value="">직무를 선택하세요.</option>
<option value="dev">개발</option>
<option value="hr">인사</option>
<option value="mkt">마케팅</option>
<option value="self">직접입력</option>
<input type="text" id="group_name" style="display: none;" />
</select>
</body>
</html>
f_changeFunc 함수를 호출할 때 this로 자기자신을 파라미터로 전달하였기 때문에 해당 스크립트 함수에서는 $(변수명).val(); 로 선택된 값을 전달받을 수 있습니다.
<script>
function f_changeFunc(obj){
var selectVal = $(obj).val(); // 선택 값 가져오기
if(selectVal == "self"){
// 직접입력하는 input 태그 보여주기
$("#group_name").show();
} else{
// 직접입력하는 input 태그 숨기기
$("#group_name").hide();
if(selectVal == ""){
alert("직무를 선택해주세요.");
} else if(selectVal == "dev"){
alert("개발팀을 선택하셨습니다.");
} else if(selectVal == "hr"){
alert("인사팀을 선택하셨습니다.");
} else if(selectVal == "mkt"){
alert("마케팅팀을 선택하셨습니다.");
}
}
}
</script>
문법 2
다음은 HTML에 onchange를 주지 않고 스크립트 단에서 직접 처리하는 방법입니다.
위 문법1과 다르게 아래는 select 태그에 onchange 이벤트를 직접 달아 함수 호출이 아닌 id값을 주어 해당 값이 변경이 감지되면 함수가 자동 실행되는 방식입니다.
<html>
<head>
// ...
</head>
<body>
<select id="group_sel">
<option value="">직무를 선택하세요.</option>
<option value="dev">개발</option>
<option value="hr">인사</option>
<option value="mkt">마케팅</option>
<option value="self">직접입력</option>
<input type="text" id="group_name" style="display: none;" />
</select>
</body>
</html>
아래처럼 코드작성을 하게 되면 group_sel이라는 id를 가진 앨리먼트의 값이 변경이 감지되면 작동되므로 동일한 결과지만 이러한 방식으로도 사용됩니다.
<script>
$("#group_sel").change(function(){
var selectVal = $(obj).val(); // 선택 값 가져오기
if(selectVal == "self"){
// 직접입력하는 input 태그 보여주기
$("#group_name").show();
} else{
// 직접입력하는 input 태그 숨기기
$("#group_name").hide();
if(selectVal == ""){
alert("직무를 선택해주세요.");
} else if(selectVal == "dev"){
alert("개발팀을 선택하셨습니다.");
} else if(selectVal == "hr"){
alert("인사팀을 선택하셨습니다.");
} else if(selectVal == "mkt"){
alert("마케팅팀을 선택하셨습니다.");
}
}
}
</script>728x90
반응형
'Programming > JavaScript' 카테고리의 다른 글
| [JS / jQuery] 비교 연산자 == , === 차이점 (0) | 2021.05.12 |
|---|---|
| [JS / jQuery] 자바스크립트 onclick 이벤트 사용법 & 예제 (0) | 2021.05.03 |
| [JS / jQuery] Ajax beforeSend - Ajax 통신 직전에 jqXHR 객체 수정하여 전송하기 (0) | 2021.04.29 |
| [JS / jQuery] empty() - 선택한 앨리먼트의 내부 요소를 지우는 메서드 (0) | 2021.04.26 |
| [JS / jQuery] 날짜(Date) 포맷형식 변경하는 함수 만들어 활용하기 (dateFormatter 구현) (0) | 2021.04.23 |
