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

Question

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    lt select id  single  gt       lt option gt Single lt  option gt       lt option gt Single2 lt  option gt   lt  select gt    lt script gt        function                 input single   change function                   Logic here does not execute when val   is used                                 single   val  Single2     lt  script gt

User · Accepted Answer

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

User · Answer

input single   trigger  change      This worked for my script  I have 3 combos  amp  bind with chainSelect event  I need to pass 3 values by url  amp  default select all drop down  I used this       machineMake   val   lt  php echo   GET  headMake      gt    trigger  change      And the first event worked

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Adding this piece of code after the val   seems to work       input single   trigger  change

User · Answer

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

User · Answer

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  gt   1                   setter invoked  do processing             return originalVal call this  value  trigger  change                        getter invoked do processing         return originalVal call this             jQuery

User · Answer

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

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

Examples related to jquery

Examples related to html

Examples related to select

Examples related to input