Question

0

157

Views

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

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>

4 months ago ·

Santiago Trujillo

3 answers

Answer question

0

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.

4 months ago · Santiago Trujillo Report

0

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

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

4 months ago · Santiago Trujillo Report

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-05-24T13:52:24.178Z

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