Show dropdown value based on previous selection

Is it possible for me to only display the related data on my second dropdown option when I click it on my first dropdown? I saw a similar question on stackoverflow, but I can’t get it to work. The link is available here. It works when I copy and paste the code from the solution into my system. However, when I tried it on my code, it did not work.

Here’s the flow: If DEPARTMENT is equals to Grade School then Grade & Section, dropdown will only show the Kindergarten to Grade 6 and then if DEPARTMENT is equals to Junior High School, dropdown will only shows Grade 7 to Grade 10 while if DEPARTMENT is equals to Senior High School, dropdown will only shows Grade 11 to Grade 12.

User interface:

Here’s the code that I’m using..

<div class="col-12">
  <div class="form-group has-icon-left">
    <label for="first-name-icon">Department</label>
    <div class="position-relative">
      <div class="input-group mb-3" id="dept">
        <label class="input-group-text" for="inputGroupSelect01">Options</label>
        <select class="form-select category" id="dept" name="dept" required>
          <option value="" disabled selected>Choose...</option>
          <option value="GS">Grade School</option>
          <option value="JHS">Junior High School</option>
          <option value="SHS">Senior High School</option>
        </select>
      </div>
    </div>
  </div>
</div>
<div class="col-12">
  <div class="form-group has-icon-left">
    <label for="first-name-icon">Grade & Section (for students only)</label>
    <div class="position-relative">
      <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">Options</label>
        <select class="form-select operator" id="u_grdsec" name="u_grdsec">
          <option value="" disabled selected>Choose...</option>
          <option value="Grade 1" class="GS">Grade 1</option>
          <option value="Grade 2" class="GS">Grade 2</option>
          <option value="Grade 7" class="JHS">Grade 7</option>
          <option value="Grade 8" class="JHS">Grade 8</option>
          <option value="Grade 11" class="SHS">Grade 11</option>
          <option value="Grade 12" class="SHS">Grade 12</option>
        </select>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function () {
      $(document).on('change', '.category', function () {
          var val = $(this).val().toLowerCase();
          $('.operator option').hide();
          $('.operator option.'+val).show();
          $('.operator option.'+val+':first').attr('selected','selected').change();
      });
  });
</script>

Here’s the screenshot of my database.

Answer

A quick fix to a minor problem

The problem is a very minor one that is difficult to spot, but very easily fixed.

The department field values in your database are uppercase, but the script tries to match to lowercase. So there is never a match and script hides all of your grade options.

To fix this problem, change the following line of code as shown:

var val = $(this).val().toLowerCase(); // incorrect

change that to:

var val = $(this).val().toUpperCase(); // correct

Yes, it is that simple! You were very close, but just needed a little help spotting the bug. 😉

You can run the snippet below to see your code working.

Addendum: There’s one other (optional) change you might want to make. Append a “removeAttr” to the following line. This will clear the previous selection when a different department is selected.

 $('.operator option').hide().removeAttr("selected");

$(document).ready(function () {
      $(document).on('change', '.category', function () {
          // var val = $(this).val().toLowerCase();  // <----- HERE IS THE PROBLEM
          var val = $(this).val().toUpperCase();
          $('.operator option').hide().removeAttr("selected");
          $('.operator option.'+val).show();
          $('.operator option.'+val+':first').attr('selected','selected').change();
      });
  });

<div class="col-12">
  <div class="form-group has-icon-left">
    <label for="first-name-icon">Department</label>
    <div class="position-relative">
      <div class="input-group mb-3" id="dept">
        <label class="input-group-text" for="inputGroupSelect01">Options</label>
        <select class="form-select category" id="dept" name="dept" required>
          <option value="" disabled selected>Choose...</option>
          <option value="GS">Grade School</option>
          <option value="JHS">Junior High School</option>
          <option value="SHS">Senior High School</option>
        </select>
      </div>
    </div>
  </div>
</div>
<div class="col-12">
  <div class="form-group has-icon-left">
    <label for="first-name-icon">Grade & Section (for students only)</label>
    <div class="position-relative">
      <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">Options</label>
        <select class="form-select operator" id="u_grdsec" name="u_grdsec">
          <option value="" disabled selected>Choose...</option>
          <option class="GS">Kindergarten</option>
          <option class="GS">Grade 1</option>
          <option class="GS">Grade 2</option>
          <option class="GS">Grade 3</option>
          <option class="GS">Grade 4</option>
          <option class="GS">Grade 5</option>
          <option class="GS">Grade 6</option>
          <option class="JHS">Grade 7</option>
          <option class="JHS">Grade 8</option>
          <option class="JHS">Grade 9</option>
          <option class="JHS">Grade 10</option>
          <option class="SHS">Grade 11</option>
          <option class="SHS">Grade 12</option>
       
<!--  PHP and DB disabled for this example

          <?php
            $conn = OpenCon();
            
            $sql = "SELECT * FROM `grdlvl`";
            
            $result = $conn->query($sql);
            
            if ($result->num_rows > 0) {
            
            while ($row = $result->fetch_assoc()) {
            
            ?>
          <option value="<?php echo $row['g_grdsec']; ?>" class="<?php echo $row['g_dept']; ?>"><?php echo $row['g_grdsec']; ?></option>
          <?php
            }
            }
            ?>
-->            
            
            
        </select>
      </div>
    </div>
  </div>
</div>


<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>