HTML -基于另一个下拉值的下拉值

Question

当我在第一个下拉列表中选择第一年的值时，我需要在第二个下拉列表中显示值Sem1和Sem2，同样，当我在第一个下拉列表中选择第二年时，我需要在第二个下拉列表中显示值Sem3和Sem4，依此类推！请帮助，代码如下：

第一个下拉菜单的代码：

<select name="class"  class="form-control">
                      <option value="none">Select Year</option>
                      <option value="First_Year">First Year</option>
                      <option value="Second_Year">Second Year</option>
                      <option value="Third_Year">Third Year</option>
                      <option value="Fourth_Year">Fourth Year</option>
</select>

第二个下拉菜单的代码：

<select name="semester"  class="form-control">
                      <option value="none">Select Semester</option>
                      <option value="Sem-1">Semester 1</option>
                      <option value="Sem-2">Semester 2</option>
                      <option value="Sem-3">Semester 3</option>
                      <option value="Sem-4">Semester 4</option>
                      <option value="Sem-5">Semester 5</option>
                      <option value="Sem-6">Semester 6</option>
                      <option value="Sem-7">Semester 7</option>
                      <option value="Sem-8">Semester 8</option>
</select>

Answer 1

为了简化解决方案，我添加了一些选择器。尝试以下方法：

​

$('#year').change(function(){
  $('#semester option').show();
  var year = $(this).val();
  if(year == 'First_Year'){
    $('#semester option:not(".year1")').hide();
  }
  else if(year == 'Second_Year'){
    $('#semester option:not(".year2")').hide();
  }
  else if(year == 'Third_Year'){
    $('#semester option:not(".year3")').hide();
  }
  else if(year == 'Fourth_Year'){
    $('#semester option:not(".year4")').hide();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="class" id="year"  class="form-control">
  <option value="none">Select Year</option>
  <option value="First_Year">First Year</option>
  <option value="Second_Year">Second Year</option>
  <option value="Third_Year">Third Year</option>
  <option value="Fourth_Year">Fourth Year</option>
</select>

<select name="semester" id="semester" class="form-control">
  <option value="none">Select Semester</option>
  <option class="year1" value="Sem-1">Semester 1</option>
  <option class="year1" value="Sem-2">Semester 2</option>
  <option class="year2" value="Sem-3">Semester 3</option>
  <option class="year2" value="Sem-4">Semester 4</option>
  <option class="year3" value="Sem-5">Semester 5</option>
  <option class="year3" value="Sem-6">Semester 6</option>
  <option class="year4" value="Sem-7">Semester 7</option>
  <option class="year4" value="Sem-8">Semester 8</option>
</select>

​