I have a dropdown like this:

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

And there is another drop-down next to it:

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

if in first dropdown grade is selected, the second dropdown should start from 3 otherwise it should start from 5. I tried using on('change'function(){})but could not manipulate values, Please help me with this.

Here I want to change the value:

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

I have a dropdown like this:

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

And there is another drop-down next to it:

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

if in first dropdown grade is selected, the second dropdown should start from 3 otherwise it should start from 5. I tried using on('change'function(){})but could not manipulate values, Please help me with this.

Here I want to change the value:

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

• javascript
• jquery

• Are you intending on having all the values from 3 to 8, but making the selected option 3 or 5 depending on if "grade" or "year" is selected? Or do you intend to have only 3 - 8 if grade is selected, or 5 - 8 if not? – Billy Purvis Commented Sep 23, 2017 at 17:36
• yes if its grade it starts from a different value and if its year it starts from a different value – Sikander Commented Sep 23, 2017 at 17:36
• 1 put a working fiddler – Rajendran Nadar Commented Sep 23, 2017 at 17:37
• 1 Please include the JS code you have so that we can see where you were having difficulties and be able to help. – FluffyKitten Commented Sep 23, 2017 at 17:42

2 Answers 2

$('.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./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>

You need to set the selectedIndex property on the second list. Also, (FYI), it may not be an issue here, but class is a reserved word in JavaScript, so you should avoid naming anything that.

$("#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./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>