如下面的代码所示,学期下拉菜单和程序下拉菜单当前是分开工作的,它们之间并不相互依赖。
如何将其更改为从属下拉列表?
例如:当用户选择31934个学期时,该程序下拉列表中仅应显示该学期下存在的程序(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
答案 0 :(得分:0)
<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>