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

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

我希望执行以下代码

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

或者

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

会触发变更事件，我觉得这很合乎逻辑，对吧？

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

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

或者

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

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

258102 次浏览
小开
最佳答案

我有一个非常类似的问题，我不太确定您有什么问题，因为您建议的代码对我非常有用。它 马上(您的一个要求)触发以下更改代码。

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

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

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

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

小开

直接的答案已经是一个重复的问题: 当我使用 val ()设置 select 的值时，为什么 jquery 更改事件不会触发？

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

如果你真的想这样做，我想唯一的方法是写一个函数，在一个时间间隔检查 DOM 和跟踪变化的值，但绝对不要这样做，除非你必须(不知道为什么你曾经需要)

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

一定要使用 return this，这样它就可以以 jQuery 的方式进行链接

小开

我发现了一件事(艰难地) , 就是你应该

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

定义之前，你正在使用

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

或者

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

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

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

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

解决方案如下(100% 工作) :

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

提交答案