How to close dropdown on onchange event of selector In iOS6?

Question

I am working on hybrid application with worklight.

When tapping on select control, a native dropdown pops out. Now I have bound onchange event on this select so when I choose any option the event gets fired but the dropdown doesn't fadeout until I tap on the done button.

I have used ('select').blur() to overcome and it is working fine for Android but not for iOS6.

I want to fadeout the dropdown with onchange.

Code:

<select id="myID" onchange="myFun()">;

function myFun(){
    $('select').blur();
}

or

function myFun(){
    $('#myID').blur();
}

What are the possible soultions for it? Thanks.

Parth, if my answer below helped you resolve your problem, please mark it as Answered. — Idan Adar, Sep 06 '14 at 15:09

score 2 · Answer 1 · edited May 23 '17 at 11:52

It seems that in iOS you cannot use .blur() on a select element, the event will be ignored.

Note: in iOS the user is expected to tap the Done button. Why confuse your end-user by introducing unexpected interaction and behavior (= not provided by the OS to begin with). For example, what if the user selected by mistake? Instead of being able to correct on the spot, s/he will be forced to tap again and select again... I recommend leaving it with the default behavior.

Updated example: instead of removing the select from the DOM and re-introducing it, I've found this.
The below works only in iOS6, though, per the question. It doesn't work in iOS7.

HTML

<div id="mySelectDiv">
    <select id="mySelect">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</div>

Selected option: <input type="text" id="selectedOption"/>

JavaScript

function wlCommonInit(){
    $("#mySelect").bind('change', changeValue);
}

function changeValue() {
    var mySelectedIndex = $("#mySelect option:selected").index();

    $("#selectedOption").val($("#mySelect option:selected").text());
    if($("#mySelect").is("select")){
        var fakeSelect = $("#mySelect").clone();
        $("#mySelect").replaceWith(fakeSelect);
        $("#mySelect").bind('change', changeValue);
        $("#mySelect").prop('selectedIndex', mySelectedIndex);
    }
}

score 1 · Accepted Answer · answered Aug 26 '14 at 06:05

While my previous answer will work, only in iOS6, the following works for me in both iOS6 and iOS7 using the iOS7-Select-Element-Auto-Close plug-in by lukewhyte.

Simply place the JS code provided in the plug-in in your project and include it in your index.html,

<script src="js/select.js"></script>

Then:

HTML

<div id="mySelectDiv">
    <select id="mySelect">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</div>

JavaScript

function wlCommonInit(){
    $('#mySelect').iOSSelect();
    $("#mySelect").bind('change', changeValue);
}

function changeValue() {
    $("#selectedOption").val($("#mySelect option:selected").text());
}

How to close dropdown on onchange event of selector In iOS6?

2 Answers2