How to Preserve Select Dropdown Value Before Change with jQuery?

Preserving Select Dropdown Value Before Change with jQuery

Achieving this is possible by combining the focus and change events in jQuery. Here's how you can do it:

($ => {
  var previous;

  $("select").on('focus', function () {
    previous = this.value; 
  }).change(function() {
    alert(previous); 
    previous = this.value; 
  });
})();

In this code, we use the focus event to store the current value of the dropdown. When the dropdown is changed (change event), we can access and display the previous value before the change.

To apply this functionality to multiple select boxes on the same page, including those added after the page load via AJAX, you can use the following updated code:

$(document).ready(function() {
  $(document).on("focus", "select", function () {
    $(this).data('previous', this.value); 
  }); 

  $(document).on("change", "select", function() {
    const previous = $(this).data('previous'); 
    if (previous) {
      alert(previous); 
      $(this).data('previous', this.value); 
    }
  });
});

The above is the detailed content of How to Preserve Select Dropdown Value Before Change with jQuery?. For more information, please follow other related articles on the PHP Chinese website!