2017-04-20 77 views
0

你好,我有一個JS問題,因爲我不知道多少它,我不知道從哪裏開始,以解決它!Javascript表單腳本無法在手機上工作(但在桌面上完美)

我目前有一個腳本運行在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(); 
    } 
}); 
+0

這個問題如何不同,你已經[刪除5分鐘](http://stackoverflow.com/questions/43520742/javascript-form-script-not-working-on-mobile-but-perfect- on-dekstop)之前? – Andreas

+0

您正在測試哪些設備/瀏覽器? –

+0

適用於Chrome和Firefox(但不適用於IE ...);不能在iOS(Safari)上運行,儘管... – Malcoolm

回答

0

我相信有一個問題在iOS上與確認您的選擇option:not([value=0])

您應該檢查http://caniuse.com/以查看移動設備是否支持該方法,如果不支持,則可以使用.forEach()循環代替。

+0

感謝您的建議;我試着做一個$(「#id_craft選項」)。 $(「#id_craft option [0]」)。show();但它似乎不工作,無論是在移動... – Malcoolm

+0

@Malcoolm哦,在這種情況下'hide()'可能不工作,因爲選項列表並沒有真正顯示在HTML頁面上,但在操作系統的用戶界面。你有沒有嘗試完全通過'remove()'從DOM中移除它? https://api.jquery.com/remove/ – Marquizzo

+0

但是我怎麼把選項放回去? – Malcoolm

相關問題