IOS 6 - Safari - replacement for a selected element acting weird (change selectedIndex)

Question

Here he is:

<select id="test" onchange="alert(this.selectedIndex); this.selectedIndex = 0"> <option>test1</option> <option>test2</option> <option>test3</option> </select> 

Works fine in all browsers. It worked great on iOS5. It does not work in iOS6. It shows a warning screen, but it seems to ignore the second part of the reset index. Oddly enough, changing onchange to onblur makes it work on iOS6 Safari, but it breaks every other browser.

So is this an iOS bug or what? Any help is appreciated.

Answer 1

Add onblur with the onblur user agent filter and set the selected index in it as well. I'm sure there is a better way than this, but it worked for me (some jQuery here):

 <select id="test" onchange="alert(this.selectedIndex); this.selectedIndex = 0" onblur="FixSelecteOniOS6(this);"> <option>test1</option> <option>test2</option> <option>test3</option> </select> <script> FixSelectOniOS6: function (ref){ alert(ref.selectedIndex) var res = navigator.userAgent.match(/; CPU.*OS (\d_\d)/); if (res) { var strVer = res[res.length - 1]; strVer = strVer.replace("_", "."); version = strVer * 1; } var i = 0, iOS = false, iDevice = ['iPad', 'iPhone', 'iPod']; for (; i < iDevice.length; i++) { if (navigator.platform === iDevice[i]) { iOS = true; break; } } if (navigator.platform.indexOf("iPad") != -1 && version == 6) { $(ref).find("option").removeAttr("selected"); $(ref).find("option:first").attr("selected", "selected"); } } </script>