Değişiklikten önce seçme (açılır) değerinin elde edilmesi

Başlamak istediğim şey, <select>açılır menü her değiştiğinde, değişimden önce açılır menü değerini istiyorum. Ben jQuery 1.3.2 sürümünü kullanarak ve değişiklik olayı kullanarak ama oraya alıyorum değer değişiklikten sonra.

<select name="test">
<option value="stack">Stack</option>
<option value="overflow">Overflow</option>
<option value="my">My</option>
<option value="question">Question</option>
</select>

Şimdi diyelim ki onchange olayında yığını değiştirmek için değiştirdiğimde (şimdi yığın olarak değiştirdiğimde) My seçili olduğunu söyleyelim.

Bu nasıl başarılabilir?

Düzenleme: Benim durumumda aynı sayfada birden fazla seçim kutusu yaşıyorum ve hepsine aynı şeyi uygulamak istiyorum. Ayrıca tüm seçimlerim ajax aracılığıyla sayfa yüklendikten sonra eklenir.

İstediğinizi elde etmek için odak olayını değişiklik olayıyla birleştirin :

(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;
    });
})();

Çalışma örneği: http://jsfiddle.net/x5PKf/766

lütfen bunun için global bir değişken kullanmayın - önceki değeri burada bulunan verilerde saklayın bir örnek: http://jsbin.com/uqupu3/2/edit

ref için kod:

$(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());
  });
});

sadece sayfada birçok seçiminizin olduğunu gördüm - bu yaklaşım sizin için de işe yarayacaktır çünkü her seçim için önceki değeri seçme verilerinde saklayacaksınız

Avi Pinto'nun jquery.data()

Odak kullanmak geçerli bir çözüm değildir. Seçenekleri ilk kez değiştirdiğinizde çalışır, ancak bu seçim öğesinde kalır ve "yukarı" veya "aşağı" tuşuna basarsanız. Odak olayından bir daha geçmeyecek.

Yani çözüm daha çok aşağıdaki gibi olmalı,

//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
})

Değeri elle izleyin.

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;
  });
});

 $("#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());
});

Olay "canlı" kullanıyorum, çözümüm temel olarak Dimitiar ile benzerdir, ancak "odak" yerine "tıklama" tetiklendiğinde önceki değerim saklanır.

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

'değiştiğinde' eylem işlevini yazmadan önce seçili jquery ile seçili olan açılır değeri global bir değişkende tutar. İşlevde önceki değeri ayarlamak istiyorsanız genel değişkeni kullanabilirsiniz.

//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;
         }
  });
});

Açısal saat türü arabirimiyle özel bir jQuery olayı kullanmaya ne dersiniz;

// 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
});

Bu eski bir iplik olduğunu biliyorum, ama biraz ekstra ekleyebilirsiniz düşündüm. Benim durumumda, metin, val ve diğer bazı verileri attr. Bu durumda tüm seçeneği sadece val yerine bir prev değeri olarak saklamak daha iyidir.

Aşağıdaki örnek kod:

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());
});

DÜZENLE:

Elemana .clone () eklemeyi unuttum. değerleri geri çekmeye çalıştığınızda, bir öncekinden ziyade seçimin yeni kopyasını çekersiniz. Clone () yönteminin kullanılması, select öğesinin kopyası yerine bir kopyasını depolar.

Peki, neden seçili değeri saklamıyorsunuz ve seçilen öğe değiştirildiğinde eski değerin kaydedilmesini sağlayacaksınız? (ve istediğiniz gibi tekrar güncelleyebilirsiniz)

Aşağıdaki kodu kullanın, test ettim ve çalışma

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;
            }
});

(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();
})();

Bu sorunu çözmek için başka bir seçeneğe katkıda bulunmak istiyorum; çünkü yukarıda önerilen çözümler benim senaryomu çözmedi.

(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());
        }
      );
    }
)();

Bu jQuery kullanır böylece def. burada bir bağımlılık, ancak bu saf javascript çalışmak için adapte edilebilir. (Gövdeye bir dinleyici ekleyin, orijinal hedefin bir seçim olup olmadığını kontrol edin, işlevi çalıştırın ...).

Değişiklik dinleyicisini gövdeye ekleyerek, seçimler için belirli dinleyicilerden sonra bunun tetikleneceğinden emin olabilirsiniz , aksi takdirde 'önce veri' değerinin üzerine yazmadan önce yazılır.

Bu elbette set-setiniz ve kontrol-değeriniz için ayrı dinleyiciler kullanmayı tercih ettiğiniz varsayılmaktadır. Tek sorumluluk modeline tam olarak uyuyor.

Not: Bu, bu 'önceki' işlevselliği tüm seçimlere ekler , bu nedenle gerekirse seçicilerin ince ayarını yaptığınızdan emin olun.

Bu @ thisisboris cevabı üzerinde bir gelişme. Verilere bir akım değeri ekler, böylece kod, geçerli değere ayarlanan bir değişkenin ne zaman değiştirileceğini kontrol edebilir.

(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() );
        }
    );
})();

En iyi çözüm:

$('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);
});

İstediğiniz sonucu elde etmenin birkaç yolu vardır, bu benim alçakgönüllü yöntemim:

Öğenin önceki değerini tutmasına izin verin, bu yüzden 'previousValue' niteliğini ekleyin.

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

Başlatıldıktan sonra, 'previousDeğeri' artık bir nitelik olarak kullanılabilir. JS'de, bu seçeneğin öncekiDeğerine erişmek için:

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

'PreviousValue' kullanmayı tamamladıktan sonra, niteliği geçerli değere güncelleyin.

Seçime göre farklı bir div açığa çıkarmam gerekiyordu

Jquery ve es6 sözdizimi ile bu şekilde yapabilirsiniz

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()
        }
    })
})