django双选择期权关系

Question

在我的html中有两个选择，

例如:如果学生从公共中选择了新来的11年级学生

被选的教育水平显示为11年级

如果学生从公共中选择了即将入学的12年级

被选的教育水平显示为11年级

<select name="studenttype" id="studenttype">
    <option >- Student Type -</option>
    {% for student_type in cat  %}
        <option value="{{student_type.id}}" name="studenttype" style="text-transform: capitalize; border-radius: 8px 8px 8px 8px ; width: auto;"  class="slide-in-bottom">{{student_type.Student_types}}</option>
     {% endfor %}
</select>

<select name="gradelevel" id="gradelevel">
     <option  class="slide-in-bottom" class="tracking-in-expand">-- Education Level --</option>
     {% for ylvl in edulevel %}
     <option value="{{ylvl.id}}">{{ylvl.Description}}</option>
     {% endfor %}
</select>

​

​

是否有可能使用javascript实现此功能？如果是，你能用我的代码给我举个例子吗？

Answer 1

你可以：

$('#studenttype').on('change', function() {
  var value = $(this).val();
  
  if(value=="Incoming Grade 11 from public"){
    $("#gradelevel").val("CORRESPONDING_VALUE");   // CORRESPONDING_VALUE= value you want to set, might be grade 11
  }
});

当值是select时，根据该值，您可以更改id为gradelevel的select值。如果需要，您可以添加尽可能多的情况。这只是向你展示它是如何工作的一种方式。CORRESPONDING_VALUE是取决于studenttype的教育水平的值。

编辑

以下是简单的基于html和jquery的代码，其中包含原始数据，只是为了理解目的。

​

$('#studenttype').on('change', function() {
  var value = $(this).val();

  if(value=="Incoming Grade 11 from public"){
    $("#gradelevel").val("grade 11");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select name="studenttype" id="studenttype">
    <option >Student type</option>
    <option value="Incoming Grade 11 from public">Incoming Grade 11 from public</option>
    <option value="Incoming Grade 12 from public">Incoming Grade 12 from public</option>
</select>

<select name="gradelevel" id="gradelevel">
     <option >Education level</option>
     <option value="grade 11">Grade 11</option>
    <option value="grade 12">Grade 12</option>
</select>

​