javascript - 隐藏选择并显示其他选择值

Question

选择年份取决于选择学术排名

如果从学术排名中选择学生，则显示所选年份，否则如果选择其他学生，则隐藏所选年份。

show 方法不起作用。此问题使用在选择学生值时删除隐藏的类(class)

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

• 您在选择器中缺少 $。
• jQuery 有toggleClass
• 您应该将处理程序添加到加载时的事件 onselect="show()" 无效
• 您也没有初始化该事件

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