javascript - HTML/JS/Django 隐藏两个选项列表中不兼容的选项

Question

我正在 django 运行的网站上为我的对象运行过滤器。 我有两个选择字段，其中的下拉列表基于我想要排序的模型的相关模型。

问题是某些选项彼此不兼容，我想根据用户在第一个选项列表中选择的内容隐藏第二个选项列表的选项。

我觉得我会使用一些 JS，但我以前从未使用过它。

1st picklist: tasks <option value = task_id>
2nd picklist: crafts <option value = craft_id>

我准备了一个字典，其中包含第一个选项列表中选择的任何选项的所有兼容值，如果这有帮助的话!

useful_dictionnary = {
    first_task_id = [list_of_compatible_craft_ids]
    ...
    last_task_id = [list_of_compatible_craft_ids]
}

我怎样才能让JS查看第一个选项列表中选择的task_id，并隐藏第二个选项列表中不在此列表中的选项？

那就太好了!谢谢!

这是我的选择列表代码，如果有帮助的话

    <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="">---------</option>
        <option value="1" selected="selected">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="" 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>

Answer 1

这个片段应该可以解决问题。更改 completedIds 以根据第一个选择映射第二个选择的选项。

$(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,3,4,5], 3 : [ 4,2,3,8,7], 4 : [ 7,9,1,5], 2 :[5,3,1,8]};
  for(var i = 0; i < compIds[$("#id_tasks").val()].length; i++){
    
    $("#id_craft option[value=" + compIds[$("#id_tasks").val()][i] + "]").show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

小插件，因为最初的问题是关于 django 字典对象: 要在 javascript 中使用 django 列表或字典，非常简单，因为 {{ django_variable }} 在脚本标签内工作得很好。

所以这个 django 模板页面的最终 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 compatibleIds = {{ my_python_dictionary }};
  for(var i = 0; i < compatibleIds[$("#id_tasks").val()].length; i++){

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