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>

Answer 2

您需要设置第二个名单上的selectedIndex财产。另外，（仅供参考），它可能不是这里的问题，但class是在JavaScript中的保留字，所以你应该避免命名任何。

$("#classes").on("change", function(){ 
 
    // Get the year to select based on the value of the first list 
 
    var year = ($(this).val() === "grade") ? "0" : "2"; 
 

 
    // Set the second list's selected item 
 
    $("#class_year").prop("selectedIndex", year); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <select class="form-control" id="classes" 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>