Jquery and PowerSchool- If statement - show hidden fields

The below will target a div and make it appear and disappear depending on what is selected in another field.





 $j("#ELStatusField").change(function() {

  if ($j(this).val() == "01" || $(this).val() == "06") {


    $j('#AccessElls').attr('required', '');

    $j('#AccessElls').attr('data-error', 'This field is required.');

  } else {











Break down of the code


 Looks for the change of the option selected on the field by using an element ID.
$j("#ELStatusField").change(function() {


If the selected option change equals the select value of 01 or 06 
if ($j(this).val() == "01" || $(this).val() == "06") { 


It will do the below.


1. show the field with the element ID of "AccessEllsDiv"



2. Make this field required

$j('#AccessElls').attr('required', '');


3. If user doesn't select a value for this field when they click submit, this will show the alert message.

$j('#AccessElls').attr('data-error', 'This field is required.');


If the user selects any other option that is not "01" or "06" the below will happen


  1. The div "AccessEllsDiv" will be hidden.      $j('#AccessEllsDiv').hide();
  2. Remove the required attribute                  $j('#AccessElls').removeAttr('required');
  3. Remove the alert message                         $j('#AccessElls').removeAttr('data-error');



Makes the magic happen                                       $j("#ELStatusField").trigger("change");






<div class="form-box">

    <label for="ELStatusField">EL Status (LEP_ELL_STATUS_CODE)</label>

    <select class="form-control" id="ELStatusField" name="[Students.S_PA_STU_X]LEP_ELL_STATUS_CODE">

          <option value=""></option>

<option value="01">01 - Current EL, not LIFE</option>

<option value="03">03 - Former EL, exited and in 1st year of monitoring</option>

<option value="04">04 - Former EL, exited and in 2nd year of monitoring</option>

<option value="07">07 - Former EL, exited and in 3rd year of monitoring</option>

<option value="08">08 - Former EL, exited and in 4th year of monitoring</option>

<option value="05">05 - Former EL, exited and no longer monitored</option>

<option value="06">06 - Current EL and LIFE</option>

<option value="99">99 - Never EL</option>




  <div class="form-box" id="AccessEllsDiv">

    <label for="AccessElls">Access for EL’s Assessment (S_PA_STU_X.ACCESS_ELLS_ASSESSMENT)</label>

    <select class="form-control" id="AccessElls" name="[Students.S_PA_STU_X]ACCESS_ELLS_ASSESSMENT">

    <option value=""></option>

      <option value="E">E</option>

<option value="A">A</option>

<option value="O">O</option>