将下拉列表更改为依赖下拉列表

Question

如下面的代码所示，Semester 下拉菜单和 Programme 下拉菜单当前是分开工作的，它们不相互依赖。

如何将其更改为依赖下拉列表？

例如：当用户选择 31934 学期时，只有该学期（semester）下存在的程序（student_prg）才会显示在程序下拉列表中。

代码

<div class="modal-body">
            <div class="form-group">
                  <label for="title">Select Current Semester:</label>
                  <select name="semester" class="form-control">
                      <option value="">--- Select Current Semester ---</option>

                      <?php
                        require('../setting/config.php');
                          $query = "SELECT DISTINCT semester FROM marketing_data ORDER BY semester DESC"; 
                          $do = mysqli_query($conn, $query);
                          while($row = mysqli_fetch_array($do)){
                              echo '<option value="'.$row['student_matric'].'">'.$row['semester'].'</option>';
                          }
                      ?>
                  </select>
              </div>
              <div class="form-group">
                  <label for="title">Select Programme:</label>
                  <select id="prg" name="prg" class="form-control">
                    <option value="">--- Select Programme ---</option>

                    <?php
                        $query2 = "SELECT student_prg, COUNT(student_prg) as count FROM marketing_data GROUP BY student_prg ORDER BY student_prg DESC"; 
                          $do = mysqli_query($conn, $query2);
                          while($row = mysqli_fetch_array($do)){
                              echo '<option value="'.$row['student_matric'].'" data-count="'.$row['count'].'">'.$row['student_prg'].'</option>';
                          }
                    ?>
                  </select>

截图

数据库

mysql> describe marketing_data;
+---------------+------------------+------+-----+---------+--------------------+
| Field         | Type                 | Null | Key | Default | Extra          |
+---------------+------------------+------+-----+---------+--------------------+
| student_matric| varchar(10) unsigned | NO   | PRI | NULL    | auto_increment |
| student_prg   | text unsigned        | YES  |     | NULL    |                |
| semester      | varchar(10)          | YES  |     | NULL    |                |
| intake_year   | int(10)              | YES  |     | NULL    |                |
| student_city  | text                 | YES  |     | NULL    |                |
| city_lat      | varchar(20)          | YES  |     | NULL    |                |
| city_long     | varchar(20)          | YES  |     | NULL    |                |
| student_state | text                 | YES  |     | NULL    |                |
| state_code    | varchar(100)         | YES  |     | NULL    |                |
+---------------+------------------+------+-----+---------+--------------------+

回复评论@VPC

当我选择学期时，program下拉菜单变为空。

刷新页面后，当我选择program时，所有学期都可以在下拉列表中查看。

Answer 1

<div class="modal-body">
    <div class="form-group">
        <label for="title">Select Current Semester:</label>
        <select name="semester" class="form-control">
            <option value="" selected disabled>--- Select Current Semester ---</option> // Don't allow them to re-select this value 

            <?php
            require('../setting/config.php');
            $query = "SELECT DISTINCT semester FROM marketing_data ORDER BY semester DESC";
            $do = mysqli_query($conn, $query);
            while ($row = mysqli_fetch_array($do)) {
                echo '<option value="' . $row['student_matric'] . '">' . $row['semester'] . '</option>';
            }
            ?>
        </select>
    </div>
    <div class="form-group">
        <label for="title">Select Programme:</label>
        <select id="prg" name="prg" class="form-control">
            <option value="" selected disabled>--- Select Programme ---</option> // Don't allow them to re-select this value

            <?php
            //get semester field also the result
            $query2 = "SELECT student_prg , semester, COUNT(student_prg) as count FROM marketing_data GROUP BY student_prg ORDER BY student_prg DESC";
            $do = mysqli_query($conn, $query2);
            while ($row = mysqli_fetch_array($do)) {
                //we are trying to add a common class to all the options 
                //then another class with semester id appended into it so it will be relevent to the specific semester expecting that semester field contains the semester code of other dropdown
                echo '<option class="hidden_options semester_' . $row['semester'] . '" value="' . $row['student_matric'] . '" data-count="' . $row['count'] . '">' . $row['student_prg'] . '</option>';
            }
            ?>
        </select>

        <script>
            //what we are trying to achieve here is when the user selects a semester, first it will hide all the option from programme dropdown then it will only show option which have the class sememter_$semeter_code
            $("select[name='semester']").change(function() {
                var selectValue = $(this).text(); //current semester text i.e semester code
                $('.hidden_options').hide(); //hide all the options
                $('.semester_' + selectValue).show(); //show only options with semester value prefixed into it
            });
        </script>