Select box value depending on other selected box option - MySQL, JS, HTML

Question

I'm making a online system for taking test as you would be taking in school. You'r student account would be bound to a class and your teachers would give you tests to complete for a grade or to practice.

At this point I'm in the stage where the teacher chooses his class or subject (Math, English, History etc.) in one select box. Then once they choose their subject they would be presented with a new select option box to select a field (Algebra, Trigonometry etc.).

My problem at this point is that once they choose a subject, Math for example, I want the new select box to (if possible) pull data form my database and check for the fields that are associated to that subject. So for math they would get option to choose algebra or trigonometry or other.

I'm not looking for complete code but snippets of code and explanation of that code would go a long way.

Currently i am pretty well familiar with PHP, HTML and CSS. I am currently learning how to use JS in my website.

What I came up: Script that is used to get the choice

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    $("#subjectSelect").change(function() {
    $("#fieldSelect").load("getter.php?choice=" + $("#subjectSelect").val());
    });
</script>

Getter.php

<?php include "includes/dbc.inc.php"?>
<?php session_start();?>
<?php
$choice = mysql_real_escape_string($_GET['choice']);
$query = "SELECT * FROM fielda WHERE field_subj_id='$choice'";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result)) {
    echo '<option value="'.$row['field_id'].'">' . $row['field_name']} . '</option>';
}

Website Code:

case "fieldquesadd":
            echo '
                <fieldset align="left">
                    <legend>Unos pitanja</legend>
                    <p>
                        <label for="subject">
                            <span>Predmet:  </span>
                        </label>
                        <select name="subject" required id="subjectSelect">
                            <option value=""></option>
                        ';
            $querySubjects = "SELECT * FROM subject";
            $resultSubjects = mysqli_query($conn, $querySubjects);
            while ($row_subjects = mysqli_fetch_array($resultSubjects)) {
                echo '<option value="' . $row_subjects['subj_id'] . '">' . $row_subjects['subj_name'] . '</option>';
            }

            echo '
                        </select>
                    </p>
                    <p id="fieldSet">
                        <label for="fieldSet">
                            <span>Gradivo: </span>
                        </label>
                        <select name="fieldSet" id="fieldSelect" required>

                        </select>
                    </p>
                </fieldset>
            ';
            break; //case "fieldquesadd"

Answer 1

The thing i can suggest is to make the new select box to display:none; until something is selected and you can make it display using js when selected

selector.style.display="block";

refer to How to display div after click the button in Javascript?

to get value from select box

refer to

Get selected option text with JavaScript

Retrive value from that select box using php $_POST['name'] method

perform a SQL query to create values in new select box same as you do to display content in table using sql and php.

or refer to Display Mysql table field values in Select box