hidden select and show from value other select

Question

select year dependent select academic rank

If a student selected from academic rank, the select year is shown else if other selected, the select year is a hidden.

The method show does not work. This problem using remove class hidden when select a student value

function show() {
  var AcademicRank = $("#academicrank").val();
  if (AcademicRank == 'Student') {
    $("#year").removeClass("hidden");
  } else {
    $("#year").addClass("hidden");
  }
}

.hidden {
  display: none!important
}

<div class="form-group validYear">
  <select class="form-control select2-single hidden" data-error="Please Select  Year " id="year" name="year" required>
    <option value="">Select Your Year *
    </option>
    <option value="First Year 1st">First Year 1st
    </option>
    <option value="Second Year  2nd">Second Year 2nd
    </option>
    <option value="Thard Year 3rd">Thard Year 3rd</option>
    <option value="Fourth Year 4th">Fourth Year 4th</option>

  </select>
  <div class=input-group-icon><i class="fa fa-map-marker"></i>
  </div>
  <div class="help-block with-errors"></div>
</div>

<div class="form-group validAcademicRank">

  <select class="form-control select2-single" data-error="Please Select  Academic Rank " id="academicrank" name="academicrank" required onselect="show()">
    <option value="">Select Your Academic Rank *
    </option>
    <option value="Assistant professor">Assistant professor
    </option>
    <option value="Associate professor">Associate professor
    </option>
    <option value="Professor">Professor </option>
    <option value="Instructor"> Instructor</option>
    <option value="Assistant Teaching">Assistant Teaching
    </option>
    <option value="Student">Student</option>

  </select>
  <div class=input-group-icon><i class="fa fa-map-marker"></i>
  </div>
  <div class="help-block with-errors"></div>
</div>

Answer 1

• You are missing the $ in the selector.
• jQuery has toggleClass
• You should add the handler to the event on load onselect="show()" is not valid
• You did not initialise the event either

$(function() { // on load 
  $("#academicrank").on("change", function() { // on change of the select
    var AcademicRank = $("#academicrank").val();
    $("#year").toggleClass("hidden", AcademicRank !== 'Student'); // toggle the class
  }).change(); // init
});

.hidden {
  display: none!important
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group validAcademicRank">
  <select class="form-control select2-single" data-error="Please Select  Academic Rank " id="academicrank" name="academicrank" required>
    <option value="">Select Your Academic Rank *</option>
    <option value="Assistant professor">Assistant professor</option>
    <option value="Associate professor">Associate professor</option>
    <option value="Professor">Professor </option>
    <option value="Instructor"> Instructor</option>
    <option value="Assistant Teaching">Assistant Teaching</option>
    <option value="Student">Student</option>
  </select>
  <div class=input-group-icon><i class="fa fa-map-marker"></i>
  </div>
  <div class="help-block with-errors"></div>
</div>
<div class="form-group validYear">
  <select class="form-control select2-single hidden" data-error="Please Select  Year " id="year" name="year" required>
    <option value="">Select Your Year *</option>
    <option value="First Year 1st">First Year 1st</option>
    <option value="Second Year  2nd">Second Year 2nd</option>
    <option value="Third Year 3rd">Third Year 3rd</option>
    <option value="Fourth Year 4th">Fourth Year 4th</option>
  </select>
  <div class=input-group-icon><i class="fa fa-map-marker"></i></div>
  <div class="help-block with-errors"></div>
</div>

Answer 2

-hidden div contains select year

function show() {
    var AcademicRank = $("#academicrank").val();
    if (AcademicRank == 'Student') {
      $("#select_year").removeClass("hidden");
    } else {
      $("#select_year").addClass("hidden");
    }
  }

.hidden {
  display: none!important
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group validAcademicRank">

  <select class="form-control select2-single" data-error="Please Select  Academic Rank " id="academicrank" name="academicrank" required onchange="show()">
    <option value="">Select Your Academic Rank *
    </option>
    <option value="Assistant professor">Assistant professor
    </option>
    <option value="Associate professor">Associate professor
    </option>
    <option value="Professor">Professor </option>
    <option value="Instructor"> Instructor</option>
    <option value="Assistant Teaching">Assistant Teaching
    </option>
    <option value="Student">Student</option>

  </select>
  <div class=input-group-icon><i class="fa fa-map-marker"></i>
  </div>
  <div class="help-block with-errors"></div>
</div>
<div class="form-group validYear hidden" id="select_year">
  <select class="form-control select2-single" data-error="Please Select  Year " id="year" name="year" required>
    <option value="">Select Your Year *
    </option>
    <option value="First Year 1st">First Year 1st
    </option>
    <option value="Second Year  2nd">Second Year 2nd
    </option>
    <option value="Thard Year 3rd">Thard Year 3rd</option>
    <option value="Fourth Year 4th">Fourth Year 4th</option>


  </select>
  <div class=input-group-icon><i class="fa fa-map-marker"></i>
  </div>
  <div class="help-block with-errors"></div>
</div>

Answer 3

You forgot to add $ before ("#year") and also the event is onchange not onselect

function show() {
  var AcademicRank = $("#academicrank").val();
  if (AcademicRank == 'Student') {
    $("#year").removeClass("hidden");
  } else {
    $("#year").addClass("hidden");
  }
}

.hidden {
  display: none!important
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group validYear">
  <select class="form-control select2-single hidden" data-error="Please Select  Year " id="year" name="year" required>
    <option value="">Select Your Year *
    </option>
    <option value="First Year 1st">First Year 1st
    </option>
    <option value="Second Year  2nd">Second Year 2nd
    </option>
    <option value="Thard Year 3rd">Thard Year 3rd</option>
    <option value="Fourth Year 4th">Fourth Year 4th</option>

  </select>
  <div class=input-group-icon><i class="fa fa-map-marker"></i>
  </div>
  <div class="help-block with-errors"></div>
</div>

<div class="form-group validAcademicRank">

  <select class="form-control select2-single" data-error="Please Select  Academic Rank " id="academicrank" name="academicrank" required onchange="show()">
    <option value="">Select Your Academic Rank *
    </option>
    <option value="Assistant professor">Assistant professor
    </option>
    <option value="Associate professor">Associate professor
    </option>
    <option value="Professor">Professor </option>
    <option value="Instructor"> Instructor</option>
    <option value="Assistant Teaching">Assistant Teaching
    </option>
    <option value="Student">Student</option>

  </select>
  <div class=input-group-icon><i class="fa fa-map-marker"></i>
  </div>
  <div class="help-block with-errors"></div>
</div>