Question

你好，我有一个JS问题，因为我不太了解它，我不知道从哪里开始修复它！

我目前有一个在django网页上运行的脚本，它隐藏了两个选项列表中不兼容的选项;使用参考词典。

该脚本在桌面上运行良好; 但在我从移动设备查看该页面时根本没有。（所有选项仍然可见......！）

任何想法都会受到极大的赞赏！

以下是 JS Fiddle

<div class="form-group col-sm-4 col-md-3">
<label for="id_tasks">Tasks:</label>
<select class="form-control" id="id_tasks" name="task">
    <option value="0" selected="selected">---------</option>
    <option value="1">Tie-job: Front-tie Marker</option>
    <option value="2">Tie-job: Scrapmachine support trackman</option>
    <option value="3">Tie-job: Plate Thrower</option>
    <option value="4">Tie-job: New-tie Marker</option>
</select>
</div>

<div class="form-group col-sm-4 col-md-3">
<label for="id_craft">Craft:</label>
    <select class="form-control" id="id_craft" name="craft">
    <option value="0" selected="selected">---------</option>
    <option value="1">Senior Engineer</option>
    <option value="2">Roadmaster</option>
    <option value="3">Foreman</option>
    <option value="4">Assistant Foreman</option>
    <option value="5">Electrical Welder EA</option>
    <option value="6">Oxygen Welder OA</option>
    <option value="7">Railway Machine Operator (RMO)</option>
    <option value="8">Truck Driver (Type A, B or C)</option>
</select>
</div>

和JS

$(document).ready(function() {
  $("#id_craft option:not([value=0])").hide();
});


$("#id_tasks").change(function() {

  $("#id_craft").val("0");
  $("#id_craft option:not([value=0])").hide();
  var compIds = {
    1: [1, 2],
    2: [3, 4],
    3: [4, 5],
    4: [6, 7]
  };
  for (var i = 0; i < compIds[$("#id_tasks").val()].length; i++) {

    $("#id_craft option[value=" + compIds[$("#id_tasks").val()][i] + "]").show();
  }
});

Answer 1

我认为iOS上的问题是识别您的选择器option:not([value=0])。

您应该检查http://caniuse.com/以确定移动设备是否支持该方法，如果不支持，则可以改为使用.forEach()循环。

Javascript表单脚本无法在移动设备上运行（但在dekstop上完美）

1 个答案: