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

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

$(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列表或dictionnary，它非常简单，因为{{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();
  }
});

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

1 个答案: