Question

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

我期望执行以下代码

$('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();
}
});

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

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

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

Answer 2

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

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

在您使用

之前定义

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

或

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

Answer 3

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

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

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

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

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

Answer 4

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

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

Answer 5

由于jQuery不会触发本地更改事件，而只会触发自己的更改事件。如果您绑定没有jQuery的事件，然后使用jQuery触发它，则绑定的回调将不会运行！

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

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

使用val（）函数</select>设置<select>的值时触发change（）事件

5 个答案: