Как поймать изменение выпадающего вручную, сделанное самим пользователем?

Question

Как я могу поймать выпадающее изменение, сделанное самим пользователем, а не когда страница загружена и этому выпадающему назначено значение по умолчанию?

Я пытался с e.originalEvent, но он не работает.

$(self.options.selectChange).change(function (e){
   // check if the change event is a user-triggered event
   if (e.originalEvent) {
      ...
   }
});

У меня есть форма с множеством выпадающих списков, и у каждого из них есть значение по умолчанию, которое устанавливается при загрузке страницы. Это действие считается раскрывающимся списком, инициирующим приведенный выше код, но я хочу запускать приведенный выше код только в том случае, если пользователь вручную изменил параметр.

Как я могу это сделать?

Answer 1

Вы ищете event.isTrigger

$('select').change(function(e) {
  console.log(e.isTrigger ? 'triggered' : 'manual')
})

$('button').click(function(e) {
  $('select').trigger('change')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option>a</option>
  <option>b</option>
</select>

<button>Trigger</button>

Answer 2

Я думаю, что лучше подходить к отметке ваших обработчиков. Создайте пользовательскую функцию с параметром label.

const customHandler = (label) => {

  if (typeof label !== 'string') {
    label = 'defaultLabel';
  }

  return (jQueryEvent, customData) => {

    let customLabel = customData ? customData.name : label;
    let jqElem = $(jQueryEvent.currentTarget);

    // you can use IF statements here based on your customLabel value

    console.log('this element was triggered by', customLabel);

  }

}

$("select").on('change', customHandler('changedByUser'));

const customTrigger = (label) => () => {

  $("select").trigger('change', {
    name: label || 'pageload'
  })

}

window.onload = customTrigger();
setTimeout(customTrigger('this-timeout'), 2000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
</select>

<br />
<div id="output"></div>