使用val（）函数设置<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事件。

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

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

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

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

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

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

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

在使用之前定义

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

要么

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

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

您可能知道设置select的值不会触发change（）事件，如果您要查找的事件是通过JS更改了元素的值时触发的，则没有一个事件。

如果您确实想执行此操作，我想唯一的方法是编写一个函数，该函数可以按时间间隔检查DOM并跟踪更改的值，但是除非您必须这样做（不确定为什么会这样），否则绝对不要这样做

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

确保可以return this，因此它可以以jQuery方式链接

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

$("#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"));