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

【问题标题】：Trigger change() event when setting <select>'s value with val() function使用 val() 函数设置 <select> 的值时触发 change() 事件
【发布时间】：2011-08-11 06:41:00
【问题描述】：

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

我预计会执行以下代码

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

或

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

将导致触发更改事件，我认为这是非常合乎逻辑的事情。对吧？

好吧，事实并非如此。您需要通过这样做来触发 change() 事件

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

或

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

但我正在寻找一些解决方案，一旦某些 javascript 代码更改了 select 的值，就会触发更改事件。

【问题讨论】：

纯javascript element.addEventListener ?
$('select#some').val(10).change();对用户来说几乎是即时的。
@Manuel 我试过了。 iv'e 使用了 object.change = function ( .... 和 object.addEventListener( ... 但没有使用 object.value、$(object).val() 和 $(object).attr('value')会触发那个监听器

标签： jquery events triggers onchange

【解决方案1】：

我遇到了一个非常相似的问题，我不太确定您遇到了什么问题，因为您建议的代码对我来说非常有用。它立即（您的要求）触发以下更改代码。

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

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

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

因此，如果数据库中的现有值为“N”，它会立即隐藏我表单中的辅助输入字段。

【讨论】：

这正是我所需要的。发现如何动态触发 DOM 事件处理程序的最佳方法是什么？ jQuery 能很好地记录这一点吗？谢谢！
$("#discount_type") .val(2) .trigger('change');
$('#add_itp_spt_parent_id').val(add_fpt_val).trigger('change'); $('#add_itp_spt_parent_id').change();两种解决方案都不起作用。
在您使用之前定义了更改功能，解决了我的问题。谢谢。

【解决方案2】：

直接答案已经在重复问题中：Why does the jquery change event not trigger when I set the value of a select using val()?

您可能知道设置 select 的值不会触发 change() 事件，如果您正在寻找一个在通过 JS 更改元素值时触发的事件，则没有。

如果你真的想这样做，我想唯一的方法是编写一个函数来检查 DOM 并跟踪更改的值，但绝对不要这样做，除非你必须这样做（不知道你为什么需要到）

添加了这个解决方案：
另一种可能的解决方案是创建您自己的.val() 包装函数，并在通过.val() 设置值后触发自定义事件，然后当您使用.val() 包装器设置<select> 的值时将触发您可以捕获和处理的自定义事件。

一定要return this，所以它可以以jQuery方式链接

【讨论】：

我已经阅读了几个关于这个问题的论坛，你的答案是我正在寻找的最后一个完成。跟踪的想法只能作为一个心理实验，显然它完全不切实际，但它是说明性的；包装器的想法很棒，感谢您指出“退货”部分。问候。
为什么$('select').val(value).change() 不能一直工作？有什么明确的解释吗？

【解决方案3】：

我发现的一件事（艰难的方法），是你应该有

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

在你使用之前定义

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

或

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

【讨论】：

旧帖子，但这解决了我的问题，使我免于脑筋急转弯...您必须在使用前定义监听器。即使是纯 JavaScript。
你能详细说明一下吗？ “change()”不是因为这个原因吗？
好吧，我会说也许这些类型的监听器没有在负载上提升，在我的项目中，我在定义监听器之前调用了change()，直到我移动了change()，它才起作用在听众下打电话，它起作用了。好吧，我会说这不应该是一个问题，这只是你构建代码的方式的问题。
这是我需要的。花了我很长时间来解决这个问题，谢谢。
太棒了！！！ “使用之前定义的更改功能”，解决了我的问题。谢谢亲爱的。

【解决方案4】：

我将其分开，然后使用身份比较来指示下一步做什么。

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

【讨论】：

【解决方案5】：

因为 jQuery 不会触发原生的 change 事件，而只会触发它自己的 change 事件。如果您在没有 jQuery 的情况下绑定事件，然后使用 jQuery 触发它，您绑定的回调将不会运行！

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

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

【讨论】：