iOS 6 - Safari - onchange for select element acting strangely (change selectedIndex)

Question

Here it is:

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

Works perfectly fine in all browsers. It worked fine on iOS5. It does not work in iOS6. It does show the alert screen but it seems to ignore the second portion to reset the index. Oddly enough, changing onchange to onblur makes it work on iOS6 Safari but breaks every other browser.

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

score 1 · Answer 1 · answered Oct 09 '12 at 14:42

Add an onblur with an iOS6 user agent filter and set the selected index in it as well. I am certain that there is a better way than this, but it worked for me (some jQuery in 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>

iOS 6 - Safari - onchange for select element acting strangely (change selectedIndex)

1 Answers1