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?

dojo.byId('league').onChange(); does that work? – Rick Calder Oct 18 '12 at 16:07 — Rick Calder, Oct 18 '12 at 16:07
@RickCalder nope, it throws the "is not a function" error – KHibma Oct 18 '12 at 16:22 — KHibma, Oct 18 '12 at 16:22
Unrelated: try styling a ` – singpolyma Oct 18 '12 at 16:37 — singpolyma, Oct 18 '12 at 16:37

Bob Davies · Accepted Answer · 2012-10-18T18:03:07.093

14

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

edited Oct 18 '12 at 18:03

answered Oct 18 '12 at 16:06

Bob Davies

2,229
1
19
28

1

The fact that your solution is all lowercase and OP's call is in mixed case is the crux of this problem. You should point that out in your answer. – gcochard Oct 18 '12 at 16:09
@Greg Sorry, Ive tried lower case in updateSelection as well. For some reason I have to spell onchange lower case in the dojo.Connect, else it wont catch it – KHibma Oct 18 '12 at 16:21
@Bob thanks, but even with that I continue to get the not a function error on it. – KHibma Oct 18 '12 at 16:24
Thanks, Im going to accept this as the answer as I'm sure it solves the issue - just not in my case. My best guess is my problem has something to do with how I've connected to the onchange event and the function trying to trigger it at another level doesnt work. – KHibma Oct 19 '12 at 16:45

score 1 · Answer 2 · answered Oct 18 '12 at 16:32

1

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

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

answered Oct 18 '12 at 16:32

Rick Calder

18,310
3
24
41

score 0 · Answer 3 · edited May 23 '17 at 12:26

0

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.

edited May 23 '17 at 12:26

Community

1
1

answered Oct 18 '12 at 16:39

singpolyma

10,999
5
47
71

onchange wont fire after programmatically changing html select dropdown

3 Answers3

Linked