Getting value of select (dropdown) before change

Exploiting jQuery's event handling capabilities

jQuery's event methods: More than meets the eye

By integrating jQuery, you unlock enhanced syntactic sweet spots and expanded event-handling powers.

let oldVal; // ripe enough for a history lesson.

$('#dropdown').on('focus', function() {
  // Old professor jQuery teaching us about 'data' 
  $(this).data('prevValue', this.value);
}).on('change', function() {
  // Quick! The history exam!
  const oldTestament = $(this).data('prevValue');
  const newTestament = this.value;
  console.log('Past:', oldTestament, 'Present:', newTestament);
  
  // Old is gold, but update nonetheless for next time.
  $(this).data('prevValue', newTestament);
});


Class-ifying multiple select boxes with jQuery

Are there multiple select boxes to deal with? Fear not! Use jQuery's powerful class selectors and the all-knowing .each() function.

$('.dropdown').each(function() {
  $(this).data('prevValue', this.value).on('focus change', function(e) {
    
    /* Software archaeology time! Excavate that ancient value. */
    if (e.type === 'focus') {
      $(this).data('prevValue', this.value);
    } else {
      const oldVal = $(this).data('prevValue');
      console.log('Ancestor:', oldVal, 'Prodigy:', this.value);
      
      /* Updating the family tree */
      $(this).data('prevValue', this.value);
    }
  });
});


Meeting newly arrived elements with event delegation

Ensure your function still shakes hands with newly inserted elements by using event delegation. Be the epitome of hospitality.

$(document).on('focus', '.dropdown', function() {
  $(this).data('prevValue', this.value);
}).on('change', '.dropdown', function() {

  /* Time-travel to the past, old value where are you? */
  const greatGrandpa = $(this).data('prevValue');
  console.log('In the past:', greatGrandpa, 'Here and now:', this.value);

  /* Progressing the timeline by one unit of data */
  $(this).data('prevValue', this.value);
});


Advanced jQuery considerations

Engaging with 'focusin'

The 'focusin' event comes with the superpower of bubbling, unlike its doppelganger 'focus'. Great flexibility for event delegation!

$(document).on('focusin', '.dropdown', function() {
  $(this).data('previous', this.value);
});


Clean globals, happy code

Avoid global pollution. Your value-ables deserve a safe, scoped storage or perhaps jQuery's .data() method.

jQuery versions and cross-browser compatibility

Beware the detail devil. .on() vs. .bind() for jQuery versions before 1.7 can change the tides. Also, don't forget cross-browser satisfaction.

Key events: To use or not to use

While tempting, key events can be a party spoiler—triggering changes that don't reflect the final value. Keep a keen eye on mouse and change events.