title: iOS Safari Mobile disable previous & next for select input
body: <p>I had found a similar question regarding this problem last Friday, but cant seem to find it again.  If someone could poke me in the right direction, that would be great.</p>
  
  <p>Essentially I have multiple select menu's on a page.  The first populates on load, the second populates determining on the selection of the first.  Simple enough. </p>
  
  <p>However, in iOS devices, when you tap on the select element, it launches the iOS scroller for you to make a selection.  If someone uses the native iOS <code>previous</code> or <code>next</code> buttons, the following <code>&lt;select&gt;</code> input will not collect the previous selection data.  You have to physically tap <code>done</code> then launch the next select menu for the populated results to be accurate.</p>
  
  <p>There is a website called <a href="http://m.lemonfree.com" rel="noreferrer">http://m.lemonfree.com</a> which forces you to tap <code>done</code> rather than <code>prev/next</code>, and also prevents you from tapping off of the iOS select menu to close the selection prompt.  Essentially forcing the user to select <code>done</code>.</p>
  
  <p>I would be very interested in finding out how they achieved this functionality.</p>
  
  <p>Cheers!</p>
  
  <p>Here's my code just in case:</p>
  
  <pre><code>&lt;form method="post" action="list.php" class="striped-bg-inverted"&gt;
    &lt;p&gt;
      &lt;label for="make"&gt;Make&lt;/label&gt;
      &lt;select name="make" id="make" required="required"&gt;
          &lt;option selected&gt;Select a Make&lt;/option&gt;
        &lt;?php foreach ($usedMakes-&gt;MakeResult as $MakeResult) { ?&gt;
          &lt;option value="&lt;?php echo $MakeResult-&gt;makeId; ?&gt;"&gt;&lt;?php echo $MakeResult-&gt;makeName; ?&gt;&lt;/option&gt;
        &lt;?php } ?&gt;
      &lt;/select&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;label for="model"&gt;Model&lt;/label&gt;
      &lt;select name="model" id="model" required="required"&gt;
        &lt;option value="" selected&gt;Select a Model&lt;/option&gt;
      &lt;/select&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;button name="submit" id="submit"&gt;&amp;nbsp;Submit&amp;nbsp;&lt;/button&gt;
    &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My JavaScript: </p>
  
  <pre><code>$("#make").change(function() {
    var makeId = $(this).val();
    $.ajax({
      url: "process.inc.php?makeId=" + makeId,
      type: "GET",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (data) {
        var list = "";
        for (i = 0 ; i &lt; data.length; i++) {
          var modelId = data[i].ModelResult.modelId;
          var modelName = data[i].ModelResult.modelName;
          list += "&lt;option value=\"" + modelId + "\"&gt;" + modelName + "&lt;/option&gt;";
        };
        var theSelect = $("#model");
        theSelect.find("option:gt(0)").remove();
        theSelect.append(list);
      }
    });
  });
  </code></pre>