복붙노트

[JQUERY] 변경 전 선택 (드롭 다운)의 값을 얻기

JQUERY

변경 전 선택 (드롭 다운)의 값을 얻기

해결법

  1. 1.당신이 원하는 것을 달성하기 위해 변경 이벤트로 포커스 이벤트를 결합 :

    당신이 원하는 것을 달성하기 위해 변경 이벤트로 포커스 이벤트를 결합 :

    (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://jsfiddle.net/x5PKf/766

  2. 2.이를 위해 글로벌 VAR를 사용하지 마십시오 - 데이터의 이전 값을 저장 여기에 예입니다 http://jsbin.com/uqupu3/2/edit

    이를 위해 글로벌 VAR를 사용하지 마십시오 - 데이터의 이전 값을 저장 여기에 예입니다 http://jsbin.com/uqupu3/2/edit

    심판의 코드 :

    $(document).ready(function(){
  var sel = $("#sel");
  sel.data("prev",sel.val());

  sel.change(function(data){
     var jqThis = $(this);
     alert(jqThis.data("prev"));
     jqThis.data("prev",jqThis.val());
  });
});

    방금 본 당신이 페이지에 많은 선택을 가지고 -이 방법은 또한 이후 각 당신을 위해 작업을 당신이 선택의 데이터의 이전 값을 저장합니다 선택합니다

  3. 3.내가) (jquery.data를 사용 아비 핀토의 솔루션을 이동

    내가) (jquery.data를 사용 아비 핀토의 솔루션을 이동

    초점을 사용하여 올바른 해결책이 아니다. 그것은 또는 "아래" "위로"키를 눌러 당신이 옵션을 변경할 수 있지만, 당신이 선택 요소에 머물 경우, 그리고 처음에 작동합니다. 그것은 다시 포커스 이벤트를 통해 이동하지 않습니다.

    이 솔루션은 다음과 같은 더 외모해야한다 그래서,

    //set the pre data, usually needed after you initialize the select element
$('mySelect').data('pre', $(this).val());

$('mySelect').change(function(e){
    var before_change = $(this).data('pre');//get the pre data
    //Do your work here
    $(this).data('pre', $(this).val());//update the pre data
})

  4. 4.손으로 가치를 추적.

    손으로 가치를 추적.

    var selects = jQuery("select.track_me");

selects.each(function (i, element) {
  var select = jQuery(element);
  var previousValue = select.val();
  select.bind("change", function () {
    var currentValue = select.val();

    // Use currentValue and previousValue
    // ...

    previousValue = currentValue;
  });
});

  5. 5.

     $("#dropdownId").on('focus', function () {
    var ddl = $(this);
    ddl.data('previous', ddl.val());
}).on('change', function () {
    var ddl = $(this);
    var previous = ddl.data('previous');
    ddl.data('previous', ddl.val());
});

  6. 6.나는 트리거 "를 클릭"할 때 내 이전 값이 저장되어, 내 솔루션은 디미타르과 기본적으로 유사하다 "라이브"이벤트를 사용, 대신에 "초점"를 사용하고 있습니다.

    나는 트리거 "를 클릭"할 때 내 이전 값이 저장되어, 내 솔루션은 디미타르과 기본적으로 유사하다 "라이브"이벤트를 사용, 대신에 "초점"를 사용하고 있습니다.

    var previous = "initial prev value";
$("select").live('click', function () {
        //update previous value
        previous = $(this).val();
    }).change(function() {
        alert(previous); //I have previous value 
    });

  7. 7.액션 기능 '변화'드롭 다운을 쓰기 전에 전역 변수의 선택 jQuery로 값 아래로 현재 선택한 드롭을 유지한다. 당신이 함수에서 이전 값을 설정하려면 전역 변수를 사용할 수 있습니다.

    액션 기능 '변화'드롭 다운을 쓰기 전에 전역 변수의 선택 jQuery로 값 아래로 현재 선택한 드롭을 유지한다. 당신이 함수에서 이전 값을 설정하려면 전역 변수를 사용할 수 있습니다.

    //global variable
var previousValue=$("#dropDownList").val();
$("#dropDownList").change(function () {
BootstrapDialog.confirm(' Are you sure you want to continue?',
  function (result) {
  if (result) {
     return true;
  } else {
      $("#dropDownList").val(previousValue).trigger('chosen:updated');  
     return false;
         }
  });
});

  8. 8.어떻게 각 시계 형 인터페이스를 사용자 정의 jQuery를 이벤트를 사용하는 방법에 대한;

    어떻게 각 시계 형 인터페이스를 사용자 정의 jQuery를 이벤트를 사용하는 방법에 대한;

    // adds a custom jQuery event which gives the previous and current values of an input on change
(function ($) {
    // new event type tl_change
    jQuery.event.special.tl_change = {
        add: function (handleObj) {
            // use mousedown and touchstart so that if you stay focused on the
            // element and keep changing it, it continues to update the prev val
            $(this)
                .on('mousedown.tl_change touchstart.tl_change', handleObj.selector, focusHandler)
                .on('change.tl_change', handleObj.selector, function (e) {
                // use an anonymous funciton here so we have access to the
                // original handle object to call the handler with our args
                var $el = $(this);
                // call our handle function, passing in the event, the previous and current vals
                // override the change event name to our name
                e.type = "tl_change";
                handleObj.handler.apply($el, [e, $el.data('tl-previous-val'), $el.val()]);
            });
        },
        remove: function (handleObj) {
            $(this)
                .off('mousedown.tl_change touchstart.tl_change', handleObj.selector, focusHandler)
                .off('change.tl_change', handleObj.selector)
                .removeData('tl-previous-val');
        }
    };

    // on focus lets set the previous value of the element to a data attr
    function focusHandler(e) {
        var $el = $(this);
        $el.data('tl-previous-val', $el.val());
    }
})(jQuery);

// usage
$('.some-element').on('tl_change', '.delegate-maybe', function (e, prev, current) {
    console.log(e);         // regular event object
    console.log(prev);      // previous value of input (before change)
    console.log(current);   // current value of input (after change)
    console.log(this);      // element
});

  9. 9.나는이 오래된 스레드 알고,하지만 약간의 추가에 추가 할 수 있습니다 생각했다. 내 경우에는 내가 텍스트, 발 및 다른 데이터 ATTR를 전달하고자했다. 이 경우는 더 나은에서 바로 발보다는 이전 값으로 모든 옵션을 저장합니다.

    나는이 오래된 스레드 알고,하지만 약간의 추가에 추가 할 수 있습니다 생각했다. 내 경우에는 내가 텍스트, 발 및 다른 데이터 ATTR를 전달하고자했다. 이 경우는 더 나은에서 바로 발보다는 이전 값으로 모든 옵션을 저장합니다.

    예제 코드 아래 :

    var $sel = $('your select');
$sel.data("prevSel", $sel.clone());
$sel.on('change', function () {
    //grab previous select
    var prevSel = $(this).data("prevSel");

    //do what you want with the previous select
    var prevVal = prevSel.val();
    var prevText = prevSel.text();
    alert("option value - " + prevVal + " option text - " + prevText)

    //reset prev val        
    $(this).data("prevSel", $(this).clone());
});

    편집하다:

    나는 요소에 () .clone를 추가하는 것을 잊었다. 당신이의 새 복사본을 당기는 결국 값을 철수 할 때 그렇게하지에서 이전보다는 선택합니다. 의 사본 선택한 클론 () 메소드를 저장하는 대신의 인스턴스를 사용.

  10. 10.원하는 결과, 그 일이 내 겸손 방식을 달성하기 위해 여러 가지 방법이 있습니다 :

    원하는 결과, 그 일이 내 겸손 방식을 달성하기 위해 여러 가지 방법이 있습니다 :

    요소가 너무 속성 'PREVIOUSVALUE'를 추가, 이전 값을 보유 할 수 있습니다.

    <select id="mySelect" previousValue=""></select>

    초기화되면, 'PREVIOUSVALUE은'이제 속성으로 사용될 수 있습니다. JS에서 접근이 선택의 PREVIOUSVALUE :

    $("#mySelect").change(function() {console.log($(this).attr('previousValue'));.....; $(this).attr('previousValue', this.value);}

    당신이 'PREVIOUSVALUE'를 사용하여 수행 한 후, 현재 값으로 속성을 업데이트합니다.

  11. 11.그럼, 왜 값을 선택 전류를 저장하지 않으며, 선택된 항목이 변경 될 때 이전 값이 저장 것인가? (당신이 원하는대로 당신은 다시 업데이트 할 수 있습니다)

    그럼, 왜 값을 선택 전류를 저장하지 않으며, 선택된 항목이 변경 될 때 이전 값이 저장 것인가? (당신이 원하는대로 당신은 다시 업데이트 할 수 있습니다)

  12. 12.그와의 작업을 사용하여 코드 다음, 내가 테스트 한

    그와의 작업을 사용하여 코드 다음, 내가 테스트 한

    var prev_val;
$('.dropdown').focus(function() {
    prev_val = $(this).val();
}).change(function(){
            $(this).unbind('focus');
            var conf = confirm('Are you sure want to change status ?');

            if(conf == true){
                //your code
            }
            else{
                $(this).val(prev_val);
                $(this).bind('focus');
                return false;
            }
});

  13. 13.

    (function() {

    var value = $('[name=request_status]').change(function() {
        if (confirm('You are about to update the status of this request, please confirm')) {
            $(this).closest('form').submit(); // submit the form
        }else {
            $(this).val(value); // set the value back
        }
    }).val();
})();

  14. 14.나는이 문제를 해결하기 위해 다른 옵션을 기여하고 싶습니다; 해결책 제안하기 때문에 위의 내 시나리오가 해결되지 않았다.

    나는이 문제를 해결하기 위해 다른 옵션을 기여하고 싶습니다; 해결책 제안하기 때문에 위의 내 시나리오가 해결되지 않았다.

    (function()
    {
      // Initialize the previous-attribute
      var selects = $('select');
      selects.data('previous', selects.val());

      // Listen on the body for changes to selects
      $('body').on('change', 'select',
        function()
        {
          $(this).data('previous', $(this).val());
        }
      );
    }
)();

    이것은 그 데프 있도록 사용 jQuery를 수행합니다. 여기에 의존성이 있지만, 이것은 순수 자바 스크립트 작업에 적용 할 수 있습니다. (... 기능을 실행 원래 대상이 선택되는지 확인 하였다 본체에 수신기를 추가).

    몸에 변화 리스너를 부착함으로써, 당신은 거의 당신도 읽을 수 있기 전에, 그렇지 않으면의 값이 '데이터 이전이'덮어 될 것입니다, 확인 선택에 대한 특정 리스너 후이 의지를 불 수 있습니다.

    물론 이것은 당신이 당신의 세트-이전 및 체크 값에 대해 별도의 수신기를 사용하는 것을 선호한다고 가정이다. 그것은 바로 단일 책임 패턴에 맞는.

    참고 :이 필요한 경우 때문에 미세 조정에 확인 선택기 할 모든 선택이 '이전'기능을 추가합니다.

  15. 15.이 @thisisboris 대답에 개선이다. 전류 값에 변수 세트가 변경 될 때 코드가 제어 할 수 있도록이 데이터 전류 값을 추가한다.

    이 @thisisboris 대답에 개선이다. 전류 값에 변수 세트가 변경 될 때 코드가 제어 할 수 있도록이 데이터 전류 값을 추가한다.

    (function()
{
    // Initialize the previous-attribute
    var selects = $( 'select' );
    $.each( selects, function( index, myValue ) {
        $( myValue ).data( 'mgc-previous', myValue.value );
        $( myValue ).data( 'mgc-current', myValue.value );  
    });

    // Listen on the body for changes to selects
    $('body').on('change', 'select',
        function()
        {
            alert('I am a body alert');
            $(this).data('mgc-previous', $(this).data( 'mgc-current' ) );
            $(this).data('mgc-current', $(this).val() );
        }
    );
})();

  16. 16.최적의 솔루션 :

    최적의 솔루션 :

    $('select').on('selectric-before-change', function (event, element, selectric) {
    var current = element.state.currValue; // index of current value before select a new one
    var selected = element.state.selectedIdx; // index of value that will be selected

    // choose what you need
    console.log(element.items[current].value);
    console.log(element.items[current].text);
    console.log(element.items[current].slug);
});

  17. 17.나는 선택에 따라 다른 사업부를 나타 내기 위해 필요

    나는 선택에 따라 다른 사업부를 나타 내기 위해 필요

    이것은 당신이 JQuery와 및 ES6 구문 함께 할 수있는 방법입니다

    HTML

    <select class="reveal">
    <option disabled selected value>Select option</option>
    <option value="value1" data-target="#target-1" >Option 1</option>
    <option value="value2" data-target="#target-2" >Option 2</option>
</select>
<div id="target-1" style="display: none">
    option 1
</div>
<div id="target-2" style="display: none">
    option 2
</div>

    JS

    $('select.reveal').each((i, element)=>{
    //create reference variable 
    let $option = $('option:selected', element)
    $(element).on('change', event => {
        //get the current select element
        let selector = event.currentTarget
        //hide previously selected target
        if(typeof $option.data('target') !== 'undefined'){
            $($option.data('target')).hide()
        }
        //set new target id
        $option = $('option:selected', selector)
        //show new target
        if(typeof $option.data('target') !== 'undefined'){
            $($option.data('target')).show()
        }
    })
})

  18. 18.var에 LAST_VALUE; var에 CURRENT_VALUE; $ (문서) CSTE 연구진 (함수를 "클릭" "선택"() { LAST_VALUE = $ (이) .val (); }).의 ( "변경", "선택", 함수 () { CURRENT_VALUE = $ (이) .val (); 을 console.log ( '마지막 값 -'+ LAST_VALUE); CONSOLE.LOG ( "현재 값 - '+ CURRENT_VALUE); }); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <선택 이름 = "테스트"> <옵션 값 = "스택"> 스택 <옵션 값 = "초과"> 오버플 <옵션 값 = "내"> 내 <옵션 값 = "질문"> 질문

    var에 LAST_VALUE; var에 CURRENT_VALUE; $ (문서) CSTE 연구진 (함수를 "클릭" "선택"() { LAST_VALUE = $ (이) .val (); }).의 ( "변경", "선택", 함수 () { CURRENT_VALUE = $ (이) .val (); 을 console.log ( '마지막 값 -'+ LAST_VALUE); CONSOLE.LOG ( "현재 값 - '+ CURRENT_VALUE); }); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <선택 이름 = "테스트"> <옵션 값 = "스택"> 스택 <옵션 값 = "초과"> 오버플 <옵션 값 = "내"> 내 <옵션 값 = "질문"> 질문

    19. from https://stackoverflow.com/questions/4076770/getting-value-of-select-dropdown-before-change by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 트리거 파일 입력  (0) 2020.10.01
[JQUERY] jQuery를 "입력"이벤트  (0) 2020.10.01
[JQUERY] 자바 스크립트 전에 페이지를 떠나  (0) 2020.10.01
[JQUERY] 여러 아약스 통화의 jQuery 콜백  (0) 2020.10.01
[JQUERY] 어떻게 자바 스크립트와 사업부의 화면을 캡처하는 방법?  (0) 2020.10.01
,

티스토리툴바