HTML - 基于另一个下拉值的下拉值[重复]答案

【问题标题】：HTML - Drop Down Value based on another Drop Down Value [duplicate]HTML - 基于另一个下拉值的下拉值[重复]
【发布时间】：2018-02-17 18:42:22
【问题描述】：

当我在第一个下拉列表中选择 Value First Year 时，我需要在第二个下拉列表中显示值 Sem1 和 Sem2，同样，当我在第一个下拉列表中选择 Second Year 时，我需要值 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>

【问题讨论】：

标签： javascript php jquery html

【解决方案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>

【讨论】：