Multiple select in Safari iOS 7

Question

When I use the multiple option in a select dropdown - safari runs into weird issues. When I select an option and say Done, the dropdown goes back to showing '0 items'. But if I select multiple options (more than one), everything except the first one gets selected. After this, if I unselect all options, the last one remains selected.

Check this for a demo using safari on iOS 7.0.3.

<select multiple="multiple"> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> </select> 

I've looked at http://www.thecssninja.com/html/optgroup-ios6, but that talks about issues with using optgroups - which(when used with multiple) currently seems to crash safari altogether.

Answer 1

    // hack for iPhone 7.0.3 multiselects bug     if(navigator.userAgent.match(/iPhone/i)) {         $('select[multiple]').each(function(){             var select = $(this).on({                 "focusout": function(){                     var values = select.val() || [];                     setTimeout(function(){                         select.val(values.length ? values : ['']).change();                     }, 1000);                 }             });             var firstOption = '<option value="" disabled="disabled"';             firstOption += (select.val() || []).length > 0 ? '' : ' selected="selected"';             firstOption += '>&laquo; Select ' + (select.attr('title') || 'Options') + ' &raquo;';             firstOption += '</option>';             select.prepend(firstOption);         });     } 

Answer 2

Simple add:

<option disabled></option> 

as the first element of multiple select.