Change () to select input in IE9

Question

I know that jQuery change() method does not work for select and radio inputs in IE9. However, none of the workarounds I found work for me.

Here is the code that works in all decent browsers:

  $("select#orderby").change( function(e){ console.log("order"); $("#candidate-filters").submit(); }); 

Here's the version of what I see people doing to get around this issue in IE9:

  $("select#orderby").bind( ($.browser.msie)? 'propertychange' : 'change', function(e){ console.log("order"); $("#candidate-filters").submit(); }); 

This does not work when I try. There are no errors in the console. Nothing just happens. What am I doing wrong?

EDIT:. When I switch to the .on() method, I can force the page to reload (presumably as a result of the .submit() action), but the input to select the form is not written. The page just reloads as if nothing had been changed.

IT WORKS! But there was another part that I overlooked that others might find useful. IE does not support the HTML5 attribute form="form_id" , which allows you to place a form element outside of the <form> tags. Therefore, as soon as I was able to bind the event, I also had to add a value to the form:

 if ($.browser.msie) { $("select#orderby").bind( "propertychange", function(e){ //console.log("order"); var update = $(this).val(); $("#candidate-filters").append('<input type="hidden" name="orderby" value="'+ update +'" /> '); $("#candidate-filters").submit(); }); } else { $("select#orderby").change( function(e){ console.log("order"); $("#candidate-filters").submit(); }); } 

I AM TOO TOO SOON: The code above only works in IE8, but not in IE9. Any ideas?

Answer 1

This example seemed to work fine for me in jsfiddle for IE9:

JQuery

 $("#test").on("change", function(){ alert("test changed to: " + this.value) })​; 

HTML

 <select id="test"> <option>1</option> <option>2</option> <option>3</option> </select> 

It is possible to potentially use blur , but it definitely depends on the specific situation.

ALSO , please keep in mind that console.log does not work in IE ... and this may be part of your problem. As pointed out in the comments of @MikeMcCaughan, the console should work with IE developer tools.

See compatibility table here . It looks like the form attribute is not supported in IE.

Answer 2

You tried to change

  $("select#orderby").change( function(e){ console.log("order"); $("#candidate-filters").submit(); }); 

to

  $("select#orderby").click( function(e){ console.log("order"); $("#candidate-filters").submit(); }); 

or using .on () or .live (), depending on your version of jquery that worked for me, this is also from Here on SO