Trigger change() event when setting <select>'s value with val() function

Question

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

I've expected that executing the following code

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

or

$('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

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

or

$('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#some').val(10).change(); is pretty much instant for the user. — Dimitri
– Dimitri, Commented Apr 22, 2011 at 23:16
@Manuel i've tried that. iv'e used object.change = function ( .... and object.addEventListener( ... but none of the object.value, $(object).val() and $(object).attr('value') would trigger that listner — Goran Radulovic
– Goran Radulovic, Commented Apr 22, 2011 at 23:25

Christos · Accepted Answer · 2015-04-30 09:12:11Z

133

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()".

$('#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.

edited Apr 30, 2015 at 9:12

Christos

54.1k9 gold badges82 silver badges114 bronze badges

answered Sep 1, 2011 at 17:05

criticman

1,4541 gold badge11 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Con Antonakos Over a year ago

This is exactly what I needed. What is the best way to discover how to dynamically trigger DOM event handlers? Does jQuery document this well? Thank you!

Satanand Tiwari Over a year ago

$("#discount_type") .val(2) .trigger('change');

Kamlesh Over a year ago

$('#add_itp_spt_parent_id').val(add_fpt_val).trigger('change'); $('#add_itp_spt_parent_id').change(); both solutions are not working.

Kamlesh Over a year ago

defined change function BEFORE you are using, solved my problem. Thanks.

Dima R. · Accepted Answer · 2015-01-08 21:04:13Z

51

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');

or

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

answered Jan 8, 2015 at 21:04

Dima R.

9972 gold badges15 silver badges26 bronze badges

5 Comments

Temitayo Over a year ago

Old post but this solved my problem, saved me from a long winded brain cracking... You must define the listener before using it. Even in pure JavaScript.

Dima R. Over a year ago

Can you elaborate a little? Isn't the "change()" is there for this reason ?

Temitayo Over a year ago

Well I will say maybe listeners of these sort are not hoisted on load, In my project, I called the change() before defining the listener and it didn't work until I moved the change() call under the listener and it worked. Well I will say this shouldn't be a problem, it is just a matter of the way you structure your code.

Jamie M. Over a year ago

This is what I needed. Took me forever to solve this issue, thanks.

Kamlesh Over a year ago

Bravo!!! "defined change function BEFORE you are using", solved my problem. Thanks dear.

Community · Accepted Answer · 2017-05-23 12:18:30Z

17

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()?

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.

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)

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

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Jan 25, 2012 at 0:16

Clarence Liu

4,0492 gold badges28 silver badges30 bronze badges

2 Comments

David L Over a year ago

I've read several forums on this question, and your answer was the last completion I was looking for. The idea of tracking only works as a mental experiment, obviously it would utterly impractical, but it's illustrative; and the idea of the wrapper is awesome, and thank you for pointing out the "return this" part. Regards.

Istiaque Ahmed Over a year ago

Why won't $('select').val(value).change() work all the time ? Any clear explanation ?

Mohamed23gharbi · Accepted Answer · 2019-01-10 10:25:07Z

8

As jQuery won't trigger native change event but only triggers its own change event. If you bind event without jQuery and then use jQuery to trigger it the callbacks you bound won't run !

The solution is then like below (100% working) :

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

answered Jan 10, 2019 at 10:25

Mohamed23gharbi

1,80025 silver badges28 bronze badges

Comments

Beaumont · Accepted Answer · 2015-02-17 16:08:13Z

2

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

answered Feb 17, 2015 at 16:08

Beaumont

312 bronze badges

Collectives™ on Stack Overflow

Trigger change() event when setting <select>'s value with val() function

5 Answers 5

4 Comments

5 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related