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>