Jquery change 이전 값 - Jquery change ijeon gabs

Question

보통 selectbox를 사용하다 보면 해당 값이 바뀌기 전의 값으로 되돌리는 기능이 필요할 때가 있다.

이럴때는, 해당 오브젝트에 focus()이벤트가 발생했을때 값을 미리 저장해 놓으면 가능하다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
aa = '';
$(function(){
 setTimeout("window.self.focus();", 1000 );

 $('#dd').focus( function(){
  aa = $(this).val();
 }).change(function(){
  $('#dd').trigger( "blur");
  $('#test').append( "before value : "+ aa +"<br>");
 });
});

</script>

<select id='dd'>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>

<div id='test'></div>

하지만, 보통 한번 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 이벤트시 이전값 가져오기

var previous; 

$(".status").on('focus', function () { 

   previous = this.value;  
   
}).change(function() { 

   var rowIdx = this.id; 

   var result = confirm("상태를 변경 하시겠습니까?"); 
   
   if(result ){   //확인 클릭 시 
        
   } else{      //취소 클릭 시 
        $("#"+rowIdx).val(previous).prop("selected", true);   //이전값으로 돌리기
   }); 
   
});

웹개발/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;
    });
})();

참고) http://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>

자바스크립트 이전값비교 jquery radio 이전값 Keyup 이전 값 jQuery 되돌리기