使用val()函数设置<select>的值时触发change()事件

Question

在设置 select 元素的值时，最简单和最好的触发 change 事件的方法是什么？

我本来以为执行以下代码就可以：

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

或者

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

会触发change事件，我认为这是很合理的。对吗？

好的，事实并非如此。你需要通过执行change()方法来触发change事件。

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

或者

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

但我正在寻找一些解决方案，可以在某些JavaScript代码更改select的值时立即触发change事件。

- Goran Radulovic

---

纯 JavaScript 的 element.addEventListener 吗？ - Manuel Bitto

对于用户而言，$('select#some').val(10).change() 几乎是瞬间完成的。 - Dimitri

@Manuel 我已经试过了。我用过 object.change = function (.... 和 object.addEventListener(...)，但是 object.value、$(object).val() 和 $(object).attr('value') 都无法触发该监听器。 - Goran Radulovic

Answer 1

我之前遇到过类似的问题，但是我不确定你所遇到的问题，因为你提供的代码对我来说运行非常好。它立即 （你的要求）触发以下更改代码。

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

然后我从数据库中取出值（这在表单上用于新输入和编辑现有记录），将其设置为选定的值，并添加我缺少的一部分来触发上面的代码：".change()"。

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

如果数据库中现有的值为“N”，则立即隐藏表单中的次要输入字段。

- criticman

---

这正是我所需要的。发现动态触发DOM事件处理程序的最佳方法是什么？jQuery是否有很好的文档说明？谢谢！ - Con Antonakos

$("#discount_type") .val(2) .trigger('change'); - Satanand Tiwari

$('#add_itp_spt_parent_id').val(add_fpt_val).trigger('change'); $('#add_itp_spt_parent_id').change(); 这两种解决方案都不起作用。 - Kamlesh

在使用之前定义了change函数，解决了我的问题。谢谢。 - Kamlesh

Answer 2

我从曲折的经历中发现，有一件事情是必须要做到的，那就是你应该

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

在你使用之前已经定义好了

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

或者

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

- Dima R.

---

旧帖子，但这解决了我的问题，使我免于长时间的头脑风暴......在纯JavaScript中使用监听器之前必须先定义它。 - Temitayo

你能详细解释一下吗？"change()"不是为了这个目的吗？ - Dima R.

我想说，也许这些类型的监听器在加载时并没有被提升。在我的项目中，我在定义监听器之前调用了 change()，但是直到我将 change() 调用移动到监听器下面才起作用。我想说这不应该是一个问题，只是你编写代码的方式不同而已。 - Temitayo

这正是我所需要的。花了我很长时间才解决这个问题，谢谢。 - Jamie M.

太棒了！“在使用之前定义更改函数”解决了我的问题。谢谢亲爱的。 - Kamlesh

Answer 3

直接的答案已经在重复的问题中了：为什么使用val()设置选项值时，jquery change事件不会触发？ 正如您可能知道的那样，设置选择的值不会触发change()事件，如果您正在寻找通过JS更改元素值时触发的事件，则没有这样的事件。

如果你真的想这样做，我猜唯一的方法是编写一个函数，在间隔上检查DOM并跟踪更改的值，但除非必须（不确定为什么会需要），否则绝对不要这样做。

添加此解决方案:
另一个可能的解决方案是创建自己的.val()包装器函数，并在通过.val()设置值后触发自定义事件，然后当您使用.val()包装器来设置的值时，它将触发您可以捕获和处理的自定义事件。请确保return this，以便它可以像jQuery一样链接。

- Clarence Liu

---

我已经阅读了几个关于这个问题的论坛，你的答案是我正在寻找的最后一个补充。仅跟踪工作只是一种心理实验的想法，显然它完全不切实际，但它很有说明性；而包装器的想法非常棒，感谢你指出“return this”部分。问候。 - David L

为什么 $('select').val(value).change() 不总是起作用？有没有清晰的解释？ - Istiaque Ahmed

Answer 4

由于jQuery不会触发原生的change事件，只会触发自己定义的change事件。如果你使用非jQuery方式绑定事件，并且再使用jQuery来触发它，则你绑定的回调函数不会运行！

解决方案如下（100%有效）：

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

- Mohamed23gharbi

Answer 5

我将其分离，然后使用身份比较来决定接下来要执行什么操作。

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

- Beaumont