jQuery change event on <select> not firing in IE

Question

I've got a page with a variable number of <select> elements (which explains why I'm using event delegation here). When the user changes the selected option, I want to hide/show different content areas on the page. Here's the code I have:

$(document).ready(function() { $('#container').change(function(e) { var changed = $(e.target); if (changed.is('select[name="mySelectName"]')) { // Test the selected option and hide/show different content areas. } }); });

This works in Firefox and Safari, but in IE the change event doesn't fire. Anyone know why?

According to MSDN, the change event doesn't bubble in IE, so unless jQuery is doing some magic, event delegation won't work: msdn.microsoft.com/en-us/library/ms536912(VS.85).aspx — NickFitz
– NickFitz, Commented Oct 28, 2009 at 14:38

Community · Accepted Answer · 2017-05-23 12:32:24Z

The change event does not bubble in IE (See here and here). You cannot use event delegation in tandem with it.

~~In fact, it is because of this IE bug that jQuery live had to officially exclude change from the list of supported events (FYI the DOM spec states change should bubble)~~.^[1]

With respect to your question, you can bind directly to each select:

$('#container select').change(/*...*/)

If you really want event delegation you might find some success trying what this person did and bind to click in IE only, which does bubble:

$('#container').bind($.browser.msie ? 'click' : 'change', function(event) { /* test event.type and event.target * to capture only select control changes */ })

But this browser detection feels really wrong. I'd really try working with the former example (binding directly to the drop downs). Unless you have hundreds of <select> boxes, event delegation wouldn't buy you much here anyway.

_{[1] Note: jQuery >= 1.4 now simulates a bubbling change event in IE via live()/on().}

This would be one of the cases you can't get away from browser testing since you can't really feature test. However, for a full solution, you'd have to also handle keyup for keyboard navigation
@Juan: some think feature detecting a bubbling event is possible. See perfectionkills.com/…
That's cool, thanks. Overview of the link that is applicable here: The post is about detecting supported events. By checking for a 'change' event on a div, you'll know whether the change event bubbles, since a div doesn't have its own change event.

Daniel · Accepted Answer · 2009-10-28 14:18:24Z

3

If I recall correctly you will need to call blur() to have jQuery invoke change() on IE machines. Try something like:

$("select[name=mySelectName]").click(function() { $(this).blur(); });

answered Oct 28, 2009 at 14:18

Daniel

12.7k14 gold badges75 silver badges108 bronze badges

2 Comments

Justin Stayton Over a year ago

Unfortunately, this doesn't do the trick. The event still isn't fired, even when the <select> is blurred.

Adam Over a year ago

I don't think blur automatically fires change. however, blur is propagated properly, so a solution might be a delegated blur event which fires the change event (you could even save the old value as data if you want to check if it's changed). This is a hack. Unfortunately the proper solution requires MS to fix old IE versions

user406905 · Accepted Answer · 2010-11-16 23:57:02Z

3

using jquery 1.4.4 (and i think 1.4.3) seems to be all good now.... the change event works consistently in my limited testing.

answered Nov 16, 2010 at 23:57

user406905

1,41616 silver badges16 bronze badges

1 Comment

Adam Over a year ago

I'm using jQuery 1.7. It works for selects which are on the page when it loads, but not for those dynamically added afterwards (I add a new row when you fill in the last existing row). The problem appears to be limited to IE 8 and below.

isherwood · Accepted Answer · 2025-04-07 21:18:13Z

Idea that might help:

$(document).ready(function() { $('#container select[name="mySelectName"]').change(function(e) { var s = $(e.target); if (s.val()=='1') //hide/show something; }); });

If you are using AJAX, try live() function:

 $(document).ready(function() { $('#container select[name="mySelectName"]').live('change', function(e) { var s = $(e.target); if (s.val()=='1') //hide/show something; }); });

jQuery/live() does not support the change event. See docs.jquery.com/Events/live#typefn
1.4 supports change event for .live, but the event itself is still a mess in IE as far as I can tell.

Soheil · Accepted Answer · 2010-04-27 13:55:56Z

Add this lines to your page head, Sit back and relax! :)

$(document).ready(function(){$('select').bind('onChange',function(){$(this).blur()});});

Littm · Accepted Answer · 2012-10-20 11:48:16Z

onchange=doAction will work in IE and Firefox, but its not supported in Chrome.

You need to use jQuery's .change event to handle this.

Maciek · Accepted Answer · 2009-10-28 14:18:17Z

0

I'm trying to understand why you need to double check the name of the select after receiving an event to it.

Do you by any chance have multiple elements with the same id ?

Did you actually mean to say "#container select" instead of "#container" ?

answered Oct 28, 2009 at 14:18

Maciek

3,3926 gold badges30 silver badges35 bronze badges

3 Comments

Justin Stayton Over a year ago

No. I'm using event delegation because I don't want to attach the event to every single <select> on the page because there's the potential for dozens of them. By attaching it to the container, there's only a single attachment.

Justin Stayton Over a year ago

And there are other <select> elements on the page that I don't want this event to fire on.

Mottie Over a year ago

You can add an ID to the select element itself

Volomike · Accepted Answer · 2012-03-14 03:20:21Z

I'm simply building upon the example set by "Crescent Flesh" for a cross-platform solution that will survive even if loading this SELECT inside #container via an AJAX call.

$('#container').bind($.browser.msie ? 'click' : 'change', function(event) { if ((event.type == 'click') || (event.type == 'change')) { if (event.target.toString().indexOf('Select') != -1) { var sWhich = $('#container SELECT').val(); handleSelectionChange(sWhich); } } });

Now you simply build the handleSelectionChange() function, renaming it whatever you want.

Pramod Kankure · Accepted Answer · 2012-08-23 21:36:20Z

IE requires change event to be placed inside document ready. This seems to bind the change event to the associated element. Hope it helps.

Jaroslav Štreit · Accepted Answer · 2012-05-03 06:40:11Z

-2

:D:D Wow, I was finding solution... Why think so complicated? Simply:
<select onchange="doAction">

answered May 3, 2012 at 6:40

Jaroslav Štreit

4301 gold badge5 silver badges16 bronze badges

2 Comments

Cheran Shunmugavel Over a year ago

Besides the fact that the question is specifically about jQuery's "change" event, the asker is using event delegation.

Jaroslav Štreit Over a year ago

Sorry, about little theme miss, but maybe it will help to someone who will be finding solution, none of this^ ideas doesn´t worked for me in IE 8 :(

Collectives™ on Stack Overflow

jQuery change event on <select> not firing in IE

10 Answers 10

3 Comments

2 Comments

1 Comment

3 Comments

Comments

Comments

3 Comments

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

2 Comments

1 Comment

3 Comments

Comments

Comments

3 Comments

Comments

Comments

2 Comments

Linked

Related