скрытый выбор и показ из значения другой выбор - PullRequest
Новая
       18

скрытый выбор и показ из значения другой выбор

0 голосов
/ 28 января 2020

выберите год в зависимости от выбранного академа c ранг

Если ученик выбран из академического c ранга, выбранный год отображается иначе, если выбран другой, выбранный год скрыт.

Метод show не работает. Эта проблема с использованием удаления класса скрытого при выборе значения студента 

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>

Ответы [ 3 ]

1 голос
/ 28 января 2020
  • Вам не хватает $ в селекторе.
  • 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>
0 голосов
/ 28 января 2020

- скрытый div содержит выбранный год 

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>
0 голосов
/ 28 января 2020

Вы забыли добавить $ до ("#year"), а также событие onchange не 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>
...