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

What is the easiest and best way to trigger change event when setting the value of select element.

在设置select元素的值时，触发更改事件的最简单和最好的方法是什么?

I've expected that executing the following code

我希望执行以下代码。

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

或

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

would result in triggering the change event, which i think is pretty logic thing to be done. Right?

将导致触发变更事件，我认为这是很合理的事情。对吧?

Well, it isn't the case. You need to triger change() event by doing this

但事实并非如此。您需要通过这样做triger change()事件

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

或

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

but i'm looking for some solution which would trigger change event as soon as select's value is changed by some javascript code.

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

4 个解决方案

#1

102

I had a very similar issue and I'm not quite sure what you're having a problem with, as your suggested code worked great for me. It immediately (a requirement of yours) triggers the following change code.

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

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

Then I take the value from the database (this is used on a form for both new input and editing existing records), set it as the selected value, and add the piece I was missing to trigger the above code, ".change()".

然后，我从数据库中获取值(这个值用于新输入和编辑现有记录的表单)，将其设置为所选值，并添加我丢失的片段以触发上面的代码“.change()”。

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

So that if the existing value from the database is 'N', it immediately hides the secondary input field in my form.

因此，如果数据库中的现有值是“N”，那么它会立即隐藏我表单中的第二个输入字段。

#2

One thing that I found out (the hard way), is that you should have

有一件事我发现了(困难的)，那就是你应该拥有

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

defined BEFORE you are using

在使用之前定义

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

或

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

#3

The straight answer is already in a duplicate question: Why does the jquery change event not trigger when I set the value of a select using val()?

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

As you probably know setting the value of the select doesn't trigger the change() event, if you're looking for an event that is fired when an element's value has been changed through JS there isn't one.

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

If you really want to do this I guess the only way is to write a function that checks the DOM on an interval and tracks changed values, but definitely don't do this unless you must (not sure why you ever would need to)

如果你真的想这样做，我猜唯一的方法是编写一个函数，它检查DOM在一个区间上的变化，跟踪改变的值，但是除非你必须这样做(不确定为什么你需要这样做)，否则绝对不要这样做

Added this solution:
Another possible solution would be to create your own .val() wrapper function and have it trigger a custom event after setting the value through .val(), then when you use your .val() wrapper to set the value of a <select> it will trigger your custom event which you can trap and handle.

Be sure to return this, so it is chainable in jQuery fashion

添加这个解决方案:另一个可能的解决方案是创建自己的.val()包装器函数,它触发自定义事件后通过.val设置值(),然后当你使用你的.val()包装器设置的价值 <选择> ,它将触发自定义事件,您可以捕获和处理。一定要返回这个，所以它在jQuery中是可链接的

#4

I separate it, and then use an identity comparison to dictate what is does next.

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

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

#1

102