I have an HTML select dropdown whose value may be edited programmatically. My change event fires when the user edits the value from the page, but not when the value is changed in the code. I need the event to fire in both cases. Any ideas on how to accomplish this?

$("#dropdownId").on('change', function () {
    //do stuff
});
...
var df = document.frmMain;
df.dropdownId.value = someValue; //change event does not fire

I have an HTML select dropdown whose value may be edited programmatically. My change event fires when the user edits the value from the page, but not when the value is changed in the code. I need the event to fire in both cases. Any ideas on how to accomplish this?

$("#dropdownId").on('change', function () {
    //do stuff
});
...
var df = document.frmMain;
df.dropdownId.value = someValue; //change event does not fire

• javascript
• jquery
• html

• 2 Have you tried encapsulating the change function into an actual function? That way you can call it manually when you modify the dropdown list. – johnnyRose Commented Aug 13, 2015 at 20:29
• It is 'by design'. Change event getting triggerred when the value is changed programmatically is bad. – Daniel Wu Commented Dec 12, 2020 at 15:25

3 Answers 3

You can use jQuery's .trigger to fire an event. In your case:

$("#dropdownId").trigger("change");

You need to manually fire the event using jquery trigger function after settig the value :

 $("#dropdownId").trigger('change');

use jquery to set selection and for fire change event.

$('#'+df.dropdownId).val(someValue).change();