title: How can I programmatically change a select box selection from within the control's own change event and have it work in mobile browsers
body: <p>Consider the following simplified HTML and jQuery code:</p>
  
  <pre><code>&lt;select id="select1"&gt;
    &lt;option value="10"&gt;10&lt;/option&gt;
    &lt;option value="5"&gt;5&lt;/option&gt;
    &lt;option selected="selected" value="1"&gt;1&lt;/option&gt;
  &lt;/select&gt;
  
  $('#select1').change(function () {
   if ($('#select1').val() &gt; 5) {
     $('#select1').val(1);
     alert("Select set to 1");
   }
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/mheffel/BJJ9D/" rel="nofollow">fiddle</a></p>
  
  <p>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)</p>
  
  <p>Basically, I'm trying to limit what a user can select under certain conditions.</p>
  
  <p>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?</p>