Отслеживание старого значения в dropdown jQuery: до изменения

Быстрый ответ

Сохраните предыдущее значение выпадающего списка, используя события mousedown и focus, которые срабатывают перед событием change.

let предыдущееЗначение;
const список = document.querySelector('#dropdown');

список.onmousedown = список.onfocus = () => предыдущееЗначение = список.value;
список.onchange = () => console.log('Было:', предыдущееЗначение, 'Стало:', список.value);

Запоминайте предыдущее значение перед сменой выбора при фокусировке, чтобы использовать его в обработчике события change.

Использование способов обработки событий в jQuery

События jQuery: больше возможностей, чем кажется

jQuery облегчает работу с событиями благодаря комфортному синтаксису и богатым возможностям обработки.

let предыдущееЗначение;

$('#dropdown').on('focus', function() {
  $(this).data('old', this.value);
}).on('change', function() {
  const было = $(this).data('old');
  const стало = this.value;
  console.log('Было:', было, 'Стало:', стало);
  
  $(this).data('old', стало);
});

Подробнее об этом расскажет наш спикер на видео

Работа с множеством выпадающих списков в jQuery

Если у вас большое количество списков, не беда: используйте классовые селекторы jQuery и метод .each().

$('.dropdown').each(function() {
  $(this).data('old', this.value).on('focus change', function(e) {
    if (e.type === 'focus') {
      $(this).data('old', this.value);
    } else {
      const было = $(this).data('old');
      console.log('Было:', было, 'Стало:', this.value);
      $(this).data('old', this.value);
    }
  });
});

Использование делегирования событий для обработки новых элементов

Делегирование событий позволяет функциям отслеживать события новых элементов.

$(document).on('focus', '.dropdown', function() {
  $(this).data('old', this.value);
}).on('change', '.dropdown', function() {
  const было = $(this).data('old');
  console.log('Было:', было, 'Стало:', this.value);
  
  $(this).data('old', this.value);
});

Визуализация

Мы обсудили, как узнать что было до изменения. Посмотрим на это визуально:

До изменения: 🍽️ Ваш обеденный стол
| Предмет         | Значение  |
| ----------------|-----------|
| Текущая каша    | 🥣 Чериос |
| Выбранная ложка | 🥄 Большая|
| Цвет салфетки   | 🟦 Синий  |

Теперь измените выбор каши.

selectElement.addEventListener('mousedown', function(event) {
  let текущее = this.value;
});

После смены блюда на обеденном столе картинка выглядит следующим образом:

После изменения: 🔄 Новый обеденный стол
| Было            | Стало             |
|-----------------|-------------------|
| 🥣 Чериос       | 🥣 Кукурузные хлопья |

Особенности использования jQuery

Взаимодействие с 'focusin'

Событие 'focusin' способно всплывать, в отличие от события 'focus', что делает его более гибким при делегировании.

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

Чистый код без глобальных переменных

Избегайте декларирования глобальных переменных. Храните значения в локальном хранилище или используйте метод .data() из jQuery.

Совместимость jQuery и кроссбраузерность

Уделите внимание различиям между .on() и .bind() в версиях jQuery до 1.7 и убедитесь, что ваш код совместим с разными браузерами.

События клавиатуры: использовать или нет

С событиями клавиатуры требуется быть осторожным, так как они могут отражать изменения, которые еще не закончены. Концентрируйтесь на событиях мыши и изменениях.

Полезные материалы

1. HTMLSelectElement – Веб-API | MDN
2. Событие onchange
3. Как получить выбранное значение выпадающего списка с помощью JavaScript – Stack Overflow
4. Метод .val() | Документация API jQuery
5. Свойства и методы элементов форм
6. Всплытие и перехват событий
7. Использование data-атрибутов – Обучение веб-разработке | MDN