Запускать событие change () при установке значения <select> с помощью функции val ()

Каков самый простой и лучший способ вызвать событие изменения при установке значения элемента select .

Я ожидал, что выполнение следующего кода

$('select#some').val(10);

или

$('select#some').attr('value',  10);

приведет к срабатыванию события изменения, что, на мой взгляд, вполне логично. Правильно?

Что ж, это не так. Вам нужно вызвать событие change (), выполнив это

$('select#some').val(10).change();

или

$('select#some').val(10).trigger('change');

но я ищу какое-то решение, которое вызовет событие изменения, как только значение выбора будет изменено некоторым кодом javascript.

У меня была очень похожая проблема, и я не совсем уверен, с чем у вас проблема, так как предложенный вами код отлично мне подходит. Он немедленно (ваше требование) вызывает следующий код изменения.

$('#selectField').change(function(){
    if($('#selectField').val() == 'N'){
        $('#secondaryInput').hide();
    } else {
        $('#secondaryInput').show();
}
});

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

$('#selectField').val(valueFromDatabase).change();

Таким образом, если существующее значение из базы данных - «N», оно немедленно скрывает вторичное поле ввода в моей форме.

Одна вещь, которую я выяснил (на собственном горьком опыте), это то, что у вас должно быть

$('#selectField').change(function(){
  // some content ...
});

определен ДО того, как вы используете

$('#selectField').val(10).trigger('change');

или

 $('#selectField').val(10).change();

Прямой ответ уже содержится в повторяющемся вопросе: почему событие изменения jquery не запускается, когда я устанавливаю значение select с помощью val ()?

Как вы, вероятно, знаете, установка значения select не запускает событие change (), если вы ищете событие, которое запускается, когда значение элемента было изменено с помощью JS, его нет.

Если вы действительно хотите это сделать, я думаю, единственный способ - написать функцию, которая проверяет DOM на интервале и отслеживает измененные значения, но определенно не делайте этого, если вы не должны (не уверен, зачем вам это когда-либо понадобится)

Добавлено это решение:
Другим возможным решением было бы создать свою собственную .val()функцию-оболочку и заставить ее запускать настраиваемое событие после установки значения .val(), а затем, когда вы используете оболочку .val () для установки значения a, <select>она запускает ваше настраиваемое событие которые вы можете поймать и обработать.

Обязательно return this, чтобы он был связан в стиле jQuery

Я отделяю его, а затем использую сравнение идентичности, чтобы определить, что делать дальше.

$("#selectField").change(function(){
  if(this.value === 'textValue1'){ $(".contentClass1").fadeIn(); }
  if(this.value === 'textValue2'){ $(".contentclass2").fadeIn(); }
});

Поскольку jQuery не запускает собственное событие изменения, а запускает только собственное событие изменения. Если вы привязываете событие без jQuery, а затем используете jQuery для его запуска, связанные обратные вызовы не будут выполняться!

Решение выглядит следующим образом (100% работает):

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));