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

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

122 голосов
/ 23 апреля 2011

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

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

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

или 

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

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

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

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

или 

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

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

Ответы [ 5 ]

116 голосов
/ 01 сентября 2011

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

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

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

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

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

40 голосов
/ 09 января 2015

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

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

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

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

или 

 $('#selectField').val(10).change();
16 голосов
/ 25 января 2012

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

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

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

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

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

2 голосов
/ 17 февраля 2015

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

$("#selectField").change(function(){
  if(this.value === 'textValue1'){ $(".contentClass1").fadeIn(); }
  if(this.value === 'textValue2'){ $(".contentclass2").fadeIn(); }
});
1 голос
/ 10 января 2019

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

Решение будет таким же, как показано ниже (100% работает): 

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