JavaScriptのフォームスクリプトはモバイルでは動作しませんが（デクストップで完璧です）

Question

こんにちは、私はJSの問題があります。私はそれについて多くのことを知らないので、どこから修正するのか分かりません。

私は現在、2つのピックリストから互換性のないオプションを隠す、django Webページ上で動作するスクリプトを持っています。参照辞書を使って

スクリプトはデスクトップ上ではうまく動作します。 モバイルデバイスからページを表示すると、まったく表示されません。（すべてのオプションが引き続き表示されています...！）

どのようなアイデアでも大変感謝しています！ここで

が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

である私はあなたのセレクタoption:not([value=0])を認識してiOSの問題があると推定します。

http://caniuse.com/をチェックして、その方法がモバイルデバイスでサポートされているかどうかを確認し、そうでない場合は.forEach()ループを使用することができます。