jquery - How can I programmatically change a select box selection from within the control's own change event and have it work in mobile browsers

Question

Consider the following simplified HTML and jQuery code:

<select id="select1">
  <option value="10">10</option>
  <option value="5">5</option>
  <option selected="selected" value="1">1</option>
</select>

$('#select1').change(function () {
 if ($('#select1').val() > 5) {
   $('#select1').val(1);
   alert("Select set to 1");
 }
});

fiddle

If the user selects 10 from the select control it's reset to 1 from within the control's own change event. This works from browsers on my desktop machine, but not on Chrome or Safari on an iPhone or iPad. (Actually on mobile browsers the selection IS set to 1 and then back to 10)

Basically, I'm trying to limit what a user can select under certain conditions.

Is there a way to reset an option on a select control from within it's own change event, and have it work in mobile browsers?

Answer 1

You need to select option either by [value=1] or give it a class .default for example.

$('#select_id').val(1);

And then refresh .selectmenu('refresh') for re-enhancement.

$('#select_id').selectmenu('refresh');

Demo 1 - Demo 2