の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> 

であれば2番目のドロップダウンは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プロパティを設定する必要があります。また、（FYI）、これは問題ではないかもしれませんが、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>