Mendapatkan nilai pilih (dropdown) sebelum berubah

Hal yang ingin saya capai adalah setiap kali <select>dropdown diubah, saya ingin nilai dropdown sebelum perubahan. Saya menggunakan versi 1.3.2 dari jQuery dan menggunakan pada acara perubahan tetapi nilai yang saya dapatkan di sana adalah setelah perubahan.

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

Katakanlah saat ini opsi Saya dipilih sekarang ketika saya mengubahnya untuk menumpuk di acara onchange (yaitu ketika saya mengubahnya untuk menumpuk) Saya ingin itu nilai sebelumnya yaitu yang saya harapkan dalam kasus ini.

Bagaimana ini bisa dicapai?

Sunting: Dalam kasus saya, saya memiliki beberapa kotak pilih di halaman yang sama dan ingin hal yang sama diterapkan pada semuanya. Juga semua pilih saya dimasukkan setelah memuat halaman melalui ajax.

Gabungkan acara fokus dengan acara perubahan untuk mencapai apa yang Anda inginkan:

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

Contoh kerja: http://jsfiddle.net/x5PKf/766

tolong jangan gunakan global var untuk ini - simpan nilai prev pada data di sini adalah contoh: http://jsbin.com/uqupu3/2/edit

kode untuk ref:

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

hanya melihat bahwa Anda memiliki banyak pilihan pada halaman - pendekatan ini juga akan bekerja untuk Anda karena untuk setiap pilih Anda akan menyimpan nilai sebelumnya pada data pilih

Saya memilih solusi Avi Pinto yang digunakan jquery.data()

Menggunakan fokus bukanlah solusi yang valid. Ini bekerja pada saat pertama kali Anda mengubah opsi, tetapi jika Anda tetap pada elemen pilih itu, dan tekan tombol "atas" atau "bawah". Itu tidak akan melalui acara fokus lagi.

Jadi solusinya harus lebih mirip seperti berikut,

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

Lacak nilainya dengan tangan.

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

Saya menggunakan acara "langsung", solusi saya pada dasarnya serupa dengan Dimitiar, tetapi alih-alih menggunakan "fokus", nilai saya sebelumnya disimpan ketika "klik" dipicu.

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

menjaga nilai drop-down yang dipilih saat ini dengan jquery yang dipilih dalam variabel global sebelum menulis fungsi aksi drop-down 'saat perubahan'. Jika Anda ingin menetapkan nilai sebelumnya dalam fungsi Anda dapat menggunakan variabel global.

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

Bagaimana dengan menggunakan acara jQuery khusus dengan antarmuka jenis jam tangan sudut;

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

Saya tahu ini adalah utas lama, tetapi saya pikir saya dapat menambahkan sedikit tambahan. Dalam kasus saya, saya ingin menyampaikan teks, val, dan beberapa data lainnya. Dalam hal ini lebih baik menyimpan seluruh opsi sebagai nilai prev daripada hanya val.

Contoh kode di bawah ini:

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

EDIT:

Saya lupa menambahkan .clone () ke elemen. dalam tidak melakukannya ketika Anda mencoba untuk menarik kembali nilai-nilai yang Anda akhirnya menarik dalam salinan yang dipilih daripada yang sebelumnya. Menggunakan metode clone () menyimpan salinan pilih bukan turunannya.

Nah, mengapa Anda tidak menyimpan nilai yang dipilih saat ini, dan ketika item yang dipilih diubah, Anda akan memiliki nilai lama disimpan? (dan Anda dapat memperbaruinya lagi sesuai keinginan)

Gunakan kode berikut, saya telah mengujinya dan berfungsi

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

Saya ingin berkontribusi opsi lain untuk menyelesaikan masalah ini; karena solusi yang diusulkan di atas tidak menyelesaikan skenario saya.

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

Ini tidak menggunakan jQuery sehingga def. adalah ketergantungan di sini, tetapi ini dapat disesuaikan untuk bekerja di javascript murni. (Tambahkan pendengar ke badan, periksa apakah target awal adalah fungsi pilih, jalankan, ...).

Dengan melampirkan pendengar perubahan ke badan, Anda dapat yakin ini akan muncul setelah pendengar tertentu untuk memilih, jika tidak nilai 'data-sebelumnya' akan ditimpa sebelum Anda bahkan dapat membacanya.

Ini tentu saja dengan asumsi bahwa Anda lebih suka menggunakan pendengar yang terpisah untuk nilai set-sebelumnya dan nilai cek Anda. Ini cocok dengan pola tanggung jawab tunggal.

Catatan: Ini menambahkan fungsionalitas 'sebelumnya' ini ke semua pilihan , jadi pastikan untuk menyelaraskan pemilih jika diperlukan.

Ini merupakan peningkatan pada jawaban @thisisboris. Ini menambahkan nilai saat ini ke data, sehingga kode dapat mengontrol ketika variabel yang diatur ke nilai saat ini diubah.

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

Solusi terbaik:

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

Ada beberapa cara untuk mencapai hasil yang Anda inginkan, ini cara saya yang sederhana untuk melakukannya:

Biarkan elemen menyimpan nilai sebelumnya, jadi tambahkan atribut 'priorValue'.

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

Setelah diinisialisasi, 'Nilai sebelumnya' sekarang dapat digunakan sebagai atribut. Di JS, untuk mengakses Nilai sebelumnya dari ini pilih:

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

Setelah selesai menggunakan 'Nilai sebelumnya', perbarui atribut ke nilai saat ini.

Saya perlu mengungkapkan div yang berbeda berdasarkan seleksi

Ini adalah bagaimana Anda dapat melakukannya dengan sintaks jquery dan 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()
        }
    })
})