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中的保留字，因此您应该避免命名任何内容。

＆＃13;

$("#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);
});

＆＃13;

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

＆＃13;

Jquery：更改事件的下拉值

2 个答案: