Jquery：更改更改事件时的下拉值

Question

我有一个像这样的下拉菜单：

<div class="form-group">
     <select class="form-control" id="class" name="class">
         <option value="grade">Grade</option>
         <option value="year">Year</option>
     </select>
 </div>

旁边还有另一个下拉菜单：

<div class="form-group">
     <select class="form-control" id="class_year" name="class_year"  >
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
         <option value="8">8</option 
     </select>
 </div>

如果在第一个下拉列表中选择了等级，则第二个下拉列表应从 3 开始，否则应从 5 开始。我尝试使用on('change'function(){})但无法操作值，请帮助我。

这里我想改变这个值：

 $("#class").on('change',function(){
            if(this.value=='grade'){ 
                // here  i have to set the value, if its grade it will start from 4 otherwise it will  be 3 
            }
        })

Answer 1

$('.first-select').on('change', function() {
     if(this.value == 'grade') {
         $('.second-select option').show();
          $('.second-select').prop('selectedIndex',0);
     }
     else if(this.value == 'year') {
         $('.second-select option[value="4"]').hide();
         $('.second-select option[value="3"]').hide();
         $('.second-select').prop('selectedIndex',2);
     }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
     <select class="form-control first-select" id="class" name="class">
         <option value="grade">Grade</option>
         <option value="year">Year</option>
     </select>
 </div>
 
 
 <div class="form-group">
     <select class="form-control second-select" id="class_year" name="class_year"  >
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
         <option value="8">8</option 
     </select>
 </div>