'jQuery change event on <select> not firing in IE

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?

Solution 1:^[1]

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;
      });
    });

Solution 2:^[2]

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();
});

Solution 3:^[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.

Solution 4:^[4]

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

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

Solution 5:^[5]

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.

Solution 6:^[6]

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" ?

Solution 7:^[7]

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.

Solution 8:^[8]

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

Solution 9:^[9]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Arnis Lapsa
Solution 2	Daniel Sloof
Solution 3	user406905
Solution 4	Soheil
Solution 5	Littm
Solution 6	Maciek
Solution 7	Volomike
Solution 8	Pramod Kankure
Solution 9	Jaroslav Å treit

'jQuery change event on <select> not firing in IE

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]