Why does the jquery change event not trigger when I set the value of a select using val()?

49
September 03, 2019, at 5:00 PM

The logic in the change() event handler is not being run when the value is set by val(), but it does run when user selects a value with their mouse. Why is this?

<select id="single">
    <option>Single</option>
    <option>Single2</option>
</select>
<script>
    $(function() {
        $(":input#single").change(function() {
           /* Logic here does not execute when val() is used */
        });
    });
    $("#single").val("Single2");
</script>
Answer 1

Because the change event requires an actual browser event initiated by the user instead of via javascript code.

Do this instead:

$("#single").val("Single2").trigger('change');

or

$("#single").val("Single2").change();
Answer 2

I believe you can manually trigger the change event with trigger():

$("#single").val("Single2").trigger('change');

Though why it doesn't fire automatically, I have no idea.

Answer 3

Adding this piece of code after the val() seems to work:

$(":input#single").trigger('change');
Answer 4

As far as I can read in API's. The event is only fired when the user clicks on an option.

http://api.jquery.com/change/

For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

Answer 5

To make it easier add a custom function and call it when ever you want that changing the value also trigger change

$.fn.valAndTrigger = function (element) {
    return $(this).val(element).trigger('change');
}

and

$("#sample").valAndTirgger("NewValue");

Or you can override the val function to always call the change when the val is called

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        this.trigger("change");
        return originalVal.call(this, value);
    };
})(jQuery);

Sample at http://jsfiddle.net/r60bfkub/

Answer 6

In case you don't want to mix up with default change event you can provide your custom event

$('input.test').on('value_changed', function(e){
    console.log('value changed to '+$(this).val());
});

to trigger the event on value set, you can do

$('input.test').val('I am a new value').trigger('value_changed');
Answer 7

I ran into the same issue while using CMB2 with Wordpress and wanted to hook into the change event of a file upload metabox.

So in case you're not able to modify the code that invokes the change (in this case the CMB2 script), use the code below. The trigger is being invoked AFTER the value is set, otherwise your change eventHandler will work, but the value will be the previous one, not the one being set.

Here's the code i use:

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        if (arguments.length >= 1) {
            // setter invoked, do processing
            return originalVal.call(this, value).trigger('change');
        }
        //getter invoked do processing
        return originalVal.call(this);
    };
})(jQuery);
Answer 8
$(":input#single").trigger('change');

This worked for my script. I have 3 combos & bind with chainSelect event, I need to pass 3 values by url & default select all drop down. I used this

$('#machineMake').val('<?php echo $_GET['headMake']; ?>').trigger('change');

And the first event worked.

Answer 9

If you've just added the select option to a form and you wish to trigger the change event, I've found a setTimeout is required otherwise jQuery doesn't pick up the newly added select box:

window.setTimeout(function() { jQuery('.languagedisplay').change();}, 1);
READ ALSO
Edit and Delete buttons are not working in form how to fix it

Edit and Delete buttons are not working in form how to fix it

The code is incorrect for edit button when click on edit button it has to show the data of person which we clicked, and delete button also has to delete the selected person's data can't solve this issue buttons are not working properly give some advice...

23
Asynchronous content loading to be aborted automatically when leaving the page? [on hold]

Asynchronous content loading to be aborted automatically when leaving the page? [on hold]

I have one part of page which takes 10 seconds to calculate and load from the serverI thought I could load the page base and navigation buttons and then load this part asynchronously by jQuery

55
Validation for multiple checkbox

Validation for multiple checkbox

I have multiple checkbox in each row:

32
Mixpanel - authenticate issue, javescript

Mixpanel - authenticate issue, javescript

I try to use 'Export Raw Data' endpoint with 'https://datamixpanel

45