iOS Safari Mobile disable previous & next for select input

Question

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.

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.

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 previous or next buttons, the following <select> input will not collect the previous selection data. You have to physically tap done then launch the next select menu for the populated results to be accurate.

There is a website called http://m.lemonfree.com which forces you to tap done rather than prev/next, and also prevents you from tapping off of the iOS select menu to close the selection prompt. Essentially forcing the user to select done.

I would be very interested in finding out how they achieved this functionality.

Cheers!

Here's my code just in case:

<form method="post" action="list.php" class="striped-bg-inverted">
  <p>
    <label for="make">Make</label>
    <select name="make" id="make" required="required">
        <option selected>Select a Make</option>
      <?php foreach ($usedMakes->MakeResult as $MakeResult) { ?>
        <option value="<?php echo $MakeResult->makeId; ?>"><?php echo $MakeResult->makeName; ?></option>
      <?php } ?>
    </select>
  </p>
  <p>
    <label for="model">Model</label>
    <select name="model" id="model" required="required">
      <option value="" selected>Select a Model</option>
    </select>
  </p>
  <p>
    <button name="submit" id="submit">&nbsp;Submit&nbsp;</button>
  </p>
</form>

My JavaScript:

$("#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 < data.length; i++) {
        var modelId = data[i].ModelResult.modelId;
        var modelName = data[i].ModelResult.modelName;
        list += "<option value=\"" + modelId + "\">" + modelName + "</option>";
      };
      var theSelect = $("#model");
      theSelect.find("option:gt(0)").remove();
      theSelect.append(list);
    }
  });
});

Answer 1

Use html tabindex="nubmer" attribute (http://www.w3schools.com/tags/att_global_tabindex.asp)

To prevent next/previous on input or select use tabindex="-1":

<input tabindex="-1" />

UPD: I've checked http://m.lemonfree.com/ scripts and does not find anything magical about this form, see code below, that's all they have (So just try to use tabindex):

$('#PostCode_text').click(function() {
    $('#PostCode_text').val('');
});

var searchForm = new LemonFree_SearchForm();

$('#Make_select').change(function() {
    searchForm.loadVastModels(this.value, '#Model_select');
});


$('#Search_form').submit(function() {
    if (Validate.isZipCode($('#PostCode_text').val())) {
        return true;
    } else {
        alert('Please enter a 5 digit zip code');
        return false;
    }
});

Answer 2

I made a module to solve this particular problem. Here is the GitHub repo, and below is a gif of it in action.