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

132

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

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

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

или

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

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

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

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

или

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

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

Горан Радулович
источник
чистый элемент javascript. addEventListener?
Мануэль Битто
4
$ ( '# выберите некоторые') вал (10) .Кнопки (). в значительной степени мгновенно для пользователя.
Димитрий
@ Мануэль, я пробовал это. iv'e использовал object.change = function (.... и object.addEventListener (... но ни один из object.value, $ (object) .val () и $ (object) .attr ('value') запустит этот листнер
Горан Радулович

Ответы:

124

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

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

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

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

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

criticman
источник
Это именно то, что мне было нужно. Как лучше всего узнать, как динамически запускать обработчики событий DOM? Хорошо ли это документирует jQuery? Спасибо!
Con Antonakos
2
$ ("# тип_ скидки") .val (2) .trigger ('изменить');
Сатана Тивари
$ ( '# add_itp_spt_parent_id') Вал (add_fpt_val) .trigger ( 'изменение'). $ ( '# add_itp_spt_parent_id') изменение (). оба решения не работают.
Kamlesh
определенная функция изменения ДО того, как вы используете, решила мою проблему. Спасибо.
Kamlesh
45

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

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

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

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

или

 $('#selectField').val(10).change();
Дима Р.
источник
4
Старый пост, но это решило мою проблему, спасло меня от долгой ломки мозга ... Вы должны определить слушателя перед его использованием. Даже в чистом JavaScript.
Temitayo
Не могли бы вы немного уточнить? Разве "change ()" не существует по этой причине?
Дима Р.
Хорошо, я скажу, что, возможно, слушатели такого типа не поднимаются при загрузке. В моем проекте я вызвал change()перед определением слушателя, и это не сработало, пока я не переместил change()вызов под слушателя, и он сработал. Что ж, я скажу, что это не должно быть проблемой, это просто вопрос того, как вы структурируете свой код.
Temitayo
1
Это то, что мне было нужно. Мне потребовалась вечность, чтобы решить эту проблему, спасибо.
Джейми М.
Браво!!! "Определенная функция изменения ДО того, как вы начнете использовать", решила мою проблему. Спасибо, дорогой.
Kamlesh
17

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

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

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

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

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

Кларенс Лю
источник
Я прочитал несколько форумов по этому вопросу, и ваш ответ был последним завершением, которое я искал. Идея отслеживания работает только как мысленный эксперимент, очевидно, что это было бы совершенно непрактично, но это иллюстративно; и идея обертки потрясающая, и спасибо, что указали на «вернуть это». С уважением.
Дэвид Л.
Почему $('select').val(value).change()все время не работает? Любое ясное объяснение?
Istiaque Ahmed
2

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

$("#selectField").change(function(){
  if(this.value === 'textValue1'){ $(".contentClass1").fadeIn(); }
  if(this.value === 'textValue2'){ $(".contentclass2").fadeIn(); }
});
Beaumont
источник
2

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

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

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));
Mohamed23gharbi
источник