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

Question

设置select元素的值时触发更改事件的最简单,最好的方法是什么.

我期望执行以下代码

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

要么

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

会导致触发更改事件,我认为这是非常合乎逻辑的事情.对？

嗯,事实并非如此.您需要通过执行此操作来触发change()事件

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

要么

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

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

Answer 1

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

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

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

$('#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()包装器设置它的值<select>时会触发你的自定义事件你可以陷阱和处理.

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

Answer 4

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

解决方案如下（100％工作）：

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