[Fixed]-HTML/JS/Django Hiding incompatible options from two picklists

by

1👍

✅

This snippet should do the trick. Change compatibleIds to map the options for the second select based on the first one.

$(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>

Small add-on as the original question was about a django dictionary object:
To use a django list or dictionnary in the javascript, it is pretty straightforward as the {{ django_variable }} works fine inside the script tags.

So the final JS for this django template page is:

$(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();
  }
});
👤Dylan Vander Berg

Leave a comment