Fire change() event upon using val() function to set value

One solution to trigger a change event when a user selects an option is to use jQuery’s built-in function. Another approach is to create a wrapper function that sets the value and triggers a custom event. It’s important to make the wrapper function chainable in jQuery fashion. Additionally, it’s worth noting that jQuery only triggers its own change event, not the native change event.

Question:

What is the most efficient method to initiate a change event while assigning a value to a select element?

I had anticipated the successful execution of the code below.

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

or

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

It seems logical to trigger the
change event
in such a situation, don’t you think?

That’s not how it works. You have to activate
change() event
by following these steps.

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

or

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

I am searching for a resolution that triggers
trigger change event
immediately after a change in value occurs in the select, caused by
javascript code
.



Solution 1:

I encountered a similar problem, but I’m unclear about the issue you’re facing since the code you proposed worked perfectly for me, triggering
change code
without any delay as you had mentioned.

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

I retrieve the value from the database, which is utilized for both new inputs and editing existing records on a form. Then, I assign it as the selected value and incorporate “.change()” to activate the aforementioned code.

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

The secondary input field in my form will be hidden right away if the value retrieved from the database is ‘N’.


Solution 2:


Through personal experience, I learned the importance of possessing a certain aspect.

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

defined BEFORE you are using

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

or

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


Solution 3:


The solution to this question can be found in a duplicate inquiry: When I use val() to set the value of a select, why doesn’t the
jquery change
event activate?

It is a well-known fact that changing the select’s value does not activate the change() event. Hence, if you are seeking an event that signals a modification in an element’s value via JS, none exists.

To achieve this, you could create a function that monitors the DOM at intervals and logs any modifications. However, I would advise against doing this unless it is absolutely necessary (which, frankly, I can’t think of a reason why it would be).

One solution could be to develop a custom wrapper function for

.val()

, which will trigger a custom event after setting the value through

.val()

. This will allow you to handle the event when you use

<select>

with .val() wrapper to set the value. To make it chainable in jQuery style, ensure to

return this

.


Solution 4:

Using jQuery, it is not possible to modify a change event’s default behavior. If you manually trigger the change event without using jQuery, any callbacks you have bound will not execute when jQuery is subsequently used to trigger it.

The following is a 100% effective solution.

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

Frequently Asked Questions