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

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

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

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

или

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

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

Ну, это не тот случай. Вам нужно событие triger change(), выполнив это

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

или

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

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

Ответ 1

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

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

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

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

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

Ответ 2

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

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

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

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

или

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

Ответ 3

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

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

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

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

Обязательно return this, поэтому он может быть связан в режиме jQuery

Ответ 4

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

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

Ответ 5

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

Решение тогда как ниже (100% работает):

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