CODEWITHSUNDEEP
javascripthtmliosipadmobile-safari
kpozin
kpozin

Reputation: 26939

Workaround for bug with 0th <select> option in Mobile Safari on iPad?

In Mobile Safari on the iPad, it seems that if there is no option selected on a <select> element, then the user cannot select the 0th option before selecting another one first (try it on http://jsfiddle.net/PJTKq/ on an iPad).

To be more specific:

  1. Create a <select> element with two or more options.
  2. Clear it by programmatically setting selectedIndex = -1 or removing the "selected" attribute from all the <option> elements.
  3. Tap the select element and choose the 0th option. The selected index won't change.
  4. Tap the select element and choose another option, then tap it again and choose the 0th option. The selected index should change twice.

Does anyone know of a workaround (besides inserting an empty dummy option) that would allow moving directly from selectedIndex -1 to selectedIndex 0?

Upvotes: 6

Views: 3661

Answers (2)

chrsr
chrsr

Reputation: 11

<script>    
// with jQuery
var iPad = !!navigator.userAgent.match(/iPad/i),
    select = "select";

if(iPad === true) {  
    $(select).prop("selectedIndex", 0);
}
</script>

Upvotes: 1

Jared Ng
Jared Ng

Reputation: 5071

Until the bug is fixed, perhaps you could detect the user-agent and make selectedIndex=0 the default for Mobile Safari.

Upvotes: 0

Related Questions