보통 selectbox를 사용하다 보면 해당 값이 바뀌기 전의 값으로 되돌리는 기능이 필요할 때가 있다.
이럴때는, 해당 오브젝트에 focus()이벤트가 발생했을때 값을 미리 저장해 놓으면 가능하다.
하지만, 보통 한번 focus를 가진 상태에서 여러번 값을 바꿀수도 있다.
이럴땐, trigger()를 이용해서 강제로 해당 오브젝트에서 blur를 실행시켜 주어야, 다시 focus()이벤트가 일어나게 하는 편법을 사용하면 된다.
$('input').on('focusin', function(){
console.log("Saving value " + $(this).val());
$(this).data('val', $(this).val());
});
$('input').on('change', function(){
var prev = $(this).data('val');
var current = $(this).val();
console.log("Prev value " + prev);
console.log("New value " + current);
});
1. change 이벤트
$("#SelectBoxID").change( function() { //TODO });2. bind 를 이용한 이벤트
$("#SelectBoxID").bind( "change", function() { //TODO });3. on 을 이용한 이벤트
$("#SelectBoxID").on( "change", function() { //TODO });* change 이벤트시 이전값 가져오기
웹개발/Javascript 2014. 8. 6. 11:33 (function () {
var previous;
$("select").on('focus', function () {
// Store the current value on focus and on change
previous = this.value;
}).change(function() {
// Do something with the previous value after the change
alert(previous);
// Make sure the previous value is updated
previous = this.value;
});
})(); 참고) //stackoverflow.com/questions/4076770/getting-value-of-select-dropdown-before-change
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>