onchange wont fire after programmatically changing html select dropdown

Question

I have a select inside HTML

<select id="league" name="league">

which I'm listening for changes inside my javascript.

var league = dojo.byId("league");
dojo.connect(league, "onchange", function (evt) { //do stuff }

Which works fine. However I have a link that I can click which updates the select:

<a href=javascript:void(0) onclick="updateSelection(league);"> League </a>

The link works as it updates the selected value of the select with the following function.

function updateSelection(NewLeague){
dojo.byId('league').value = NewLeague;  // works
dojo.byId('league').onChange;   //this isnt working
//dojo.byId('league').onChange();  //this throws: TypeError: dojo.byId("league").onChange is not a function 
}

My problem, as I've read through other stack posts is that programmatically updating the value wont trigger onChange, thus I need to call onchange in the code (shown above). As per the comments inline, the onChange isn't being triggered or throws an error. My first thought that it has something to do with the dojo.Connect which listens for onChange, but I havent found any information that says I cant do this, nor any explanation how to get around it.

Any ideas?

Answer 1

Select onchange doesn't fire for programattic changes, you need to fire it yourself with league.onchange();

As noted by @Greg, the call should be lowercase.

Additionally, I don't know if dojo has a trigger method, but in jQuery this would be done as jQuery('#league').trigger('change').

Depending on your version of dojo you may also want to check: http://dojotoolkit.org/reference-guide/1.8/dojo/connect.html

Answer 2

Have you tried just calling the select by it's id using normal js?

document.getElementById('league').onchange.call();

Answer 3

As others have said, you need to trigger the event yourself, just setting the value does not do that. See the code on How to trigger event in JavaScript? to see how in a cross-browser way.