13

上周五我发现了一个关于这个问题的类似问题，但似乎无法再次找到它。如果有人能朝正确的方向戳我，那就太好了。

基本上我在一个页面上有多个选择菜单。第一个填充加载，第二个填充确定第一个的选择。很简单。

但是，在 iOS 设备中，当您点击选择元素时，它会启动 iOS 滚动条供您进行选择。如果有人使用原生 iOSprevious或next按钮，下面的<select>输入不会收集之前的选择数据。您必须实际点击done然后启动下一个选择菜单才能使填充的结果准确。

有一个名为http://m.lemonfree.com的网站会强制您点击done而不是prev/next，并且还会阻止您点击 iOS 选择菜单以关闭选择提示。本质上是强迫用户选择done.

我很想知道他们是如何实现这个功能的。

干杯!

这是我的代码以防万一：

<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>

我的 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);
    }
  });
});
4

2 回答 2

11

使用 htmltabindex="nubmer"属性 ( http://www.w3schools.com/tags/att_global_tabindex.asp )

要防止下一个/上一个输入或选择使用tabindex="-1"：

<input tabindex="-1" />

UPD：我检查了http://m.lemonfree.com/脚本并没有发现这个表单有什么神奇之处，请参见下面的代码，这就是他们所拥有的（所以尝试使用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;
    }
});
于 2013-10-21T07:57:57.033 回答
2

我制作了一个模块来解决这个特殊问题。这是 GitHub 存储库，下面是它的 gif 动图。

在此处输入图像描述

于 2014-01-06T04:50:33.263 回答