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

Question

设置 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的值，就会触发change事件。

Answer 1

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

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

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

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

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

Answer 2

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

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

在使用之前定义

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

或

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

Answer 3

直接的答案已经在重复的问题中： 为什么当我使用 val() 设置 select 的值时，jquery 更改事件没有触发？

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

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

添加了此解决方案：
另一种可能的解决方案是创建您自己的 .val() 包装函数，并在通过 .val() 设置值后让它触发自定义事件，然后当您使用您的 .val() 包装器设置 的值，它将触发您可以捕获和处理的自定义事件。 请务必返回此，以便它可以以 jQuery 方式链接

Answer 4

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

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

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

Answer 5

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

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