Только если выбор изменится с варианта X на произвольный вариант

Question

Я пытаюсь выполнить вызов ajax после этого условия: Если мой выбор изменится с варианта X на произвольный другой вариант. Мне, наверное, нужно сначала поймать выбранный вариант (что бы было X). Вызов ajax можно пока игнорировать, но для целей тестирования будет достаточно console.log («Да, работает»).

Пример кода:

<select id="mySelect">
    <option>X</option>
    <option>Y</option>
    <option>Z</option>
    <option>A</option>
</select>

Я кое-что пробовал вот так:

$(function() {
  var curr = $('#mySelect option:selected');
  if (curr.val() === "X") {
    curr.change()(function{
      console.log("It works!");
    )}

  }

})

Но это конечно не работает.

Answer 1

Вам нужно будет отслеживать предыдущее значение.

$(function(){
  const $select = $('#mySelect');
  let previousValue = $select.val();
  
  $select.on('change', e => {
    if (previousValue === 'X') {
      console.log('New value is', $select.val());
    }
    
    previousValue = $select.val();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect">
    <option>X</option>
    <option>Y</option>
    <option>Z</option>
    <option>A</option>
</select>

Answer 2

Из комментариев под вопросом кажется, что ваша цель - запустить запрос AJAX, когда выбор конкретно изменится от значения X.

Для этого вам нужно знать, что было в предыдущем значение - когда происходит событие change. Это может быть достигнуто путем сохранения значения в атрибуте data элемента, который обновляется при загрузке и после каждого change. Попробуйте это:

$(function() {
  var $curr = $('#mySelect')
  $curr.on('change', function () {
    if ($curr.data('prevValue') == 'X') {
      console.log('Make your AJAX request here...');      
    }
    
    $curr.data('prevValue', $curr.val());
  }).trigger('change');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect">
  <option>X</option>
  <option>Y</option>
  <option>Z</option>
  <option>A</option>
</select>