如何在Bootstrap表单下拉选择框中添加联动条件？

数据老陈

2026-7-21

学生评分系统科目与活动联动开发问题

我计划为学生评分系统开发一个评分模块，要求必须先选择科目，才能选择对应科目下的专属活动。我尝试添加条件语句，通过SQL查询筛选出class_id等于$courseTitle的活动，其中$courseTitle的值来自$_POST['courseTitle']。

现有代码

表单部分

<div class="row">
<div class="col-6">
<div class="form-group">
<label for="cc-exp" class="control-label mb-1">科目</label>
<?php 
$query=mysqli_query($con,"select * from tblcourse");                        
$count = mysqli_num_rows($query);
if($count > 0){                       
echo ' <select required name="semesterId" class="custom-select form-control">';
echo'<option value="">--选择科目--</option>';
while ($row = mysqli_fetch_array($query)) {
echo'<option value="'.$row['Id'].'">'.$row['courseTitle'].'</option>';
}
      echo '</select>';
}
?>                                                       
</div>

<div class="col-6">
<div class="form-group">
<label for="x_card_code" class="control-label mb-1">活动</label>
$query=mysqli_query($con,"select * from assessment_list where class_id = $courseTitle"); 
$courseTitle = $_POST['courseTitle'];                       
$count = mysqli_num_rows($query);
if($count > 0){                       
echo ' <select required name="levelId" class="custom-select form-control">';
echo'<option value="">--选择活动--</option>';
while ($row = mysqli_fetch_array($query)) {
echo'<option value="'.$row['Id'].'">'.$row['name'].'</option>';
}
     echo '</select>';
}
</div>
</div>

页面头部PHP代码

<?php

    include('../includes/dbconnection.php');
    include('../includes/session.php');
    error_reporting(0);

if(isset($_POST['submit'])){

     $alertStyle ="";
      $statusMsg="";

    $courseTitle=$_POST['courseTitle'];
    $courseCode=$_POST['courseCode'];
    $levelId=$_POST['levelId'];
    $semesterId=$_POST['semesterId'];
    $dateAdded = date("Y-m-d");


    $query=mysqli_query($con,"insert into tblcourse(courseTitle,courseCode,levelId,semesterId,dateAdded) value('$courseTitle','$courseCode','$levelId','$semesterId','$dateAdded')");

    if ($query) {
        
       $alertStyle ="alert alert-success";
       $statusMsg="科目创建并分配成功！";
    }
    else
    {
      $alertStyle ="alert alert-danger";
      $statusMsg="发生错误！";
    }
  }
  ?>

代码中的问题及修正方案

参数顺序错误：活动查询中先执行SQL再给$courseTitle赋值，导致查询时变量未定义，必须先获取POST参数再执行查询。
表单name不匹配：科目下拉框的name是semesterId，但后续取值用的是$_POST['courseTitle']，两者不匹配，需统一命名。
未包裹PHP代码：活动部分的PHP代码没有用<?php ?>包裹，会直接作为文本输出到页面。
SQL注入风险：直接将用户输入拼接到SQL语句中，存在严重安全隐患，需使用预处理语句。
无前端联动：现有代码无法实现选择科目后动态加载活动，需要结合JavaScript实现AJAX异步请求。

修正后的完整代码

前端表单（带AJAX联动）

<div class="row">
    <div class="col-6">
        <div class="form-group">
            <label for="courseTitle" class="control-label mb-1">科目</label>
            <?php 
            $query = mysqli_query($con, "select * from tblcourse");                        
            $count = mysqli_num_rows($query);
            if($count > 0){                       
                echo '<select required name="courseTitle" id="courseTitle" class="custom-select form-control">';
                echo '<option value="">--选择科目--</option>';
                while ($row = mysqli_fetch_array($query)) {
                    echo '<option value="'.$row['Id'].'">'.$row['courseTitle'].'</option>';
                }
                echo '</select>';
            }
            ?>                                                       
        </div>
    </div>

    <div class="col-6">
        <div class="form-group">
            <label for="levelId" class="control-label mb-1">活动</label>
            <select required name="levelId" id="activitySelect" class="custom-select form-control">
                <option value="">--请先选择科目--</option>
            </select>
        </div>
    </div>
</div>

<script>
document.getElementById('courseTitle').addEventListener('change', function() {
    const courseId = this.value;
    const activitySelect = document.getElementById('activitySelect');
    
    // 清空活动下拉框
    activitySelect.innerHTML = '<option value="">--加载中--</option>';
    
    if (!courseId) {
        activitySelect.innerHTML = '<option value="">--请先选择科目--</option>';
        return;
    }
    
    // 发送AJAX请求获取对应科目活动
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'get_activities.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
        if (this.status === 200) {
            activitySelect.innerHTML = this.responseText;
        } else {
            activitySelect.innerHTML = '<option value="">--加载失败--</option>';
        }
    };
    xhr.send('courseId=' + encodeURIComponent(courseId));
});
</script>

获取活动的后端文件（get_activities.php）

<?php
include('../includes/dbconnection.php');

if(isset($_POST['courseId'])) {
    $courseId = $_POST['courseId'];
    
    // 使用预处理语句防止SQL注入
    $stmt = $con->prepare("select * from assessment_list where class_id = ?");
    $stmt->bind_param("i", $courseId);
    $stmt->execute();
    $result = $stmt->get_result();
    
    echo '<option value="">--选择活动--</option>';
    while ($row = $result->fetch_assoc()) {
        echo '<option value="'.$row['Id'].'">'.$row['name'].'</option>';
    }
    
    $stmt->close();
}
?>

修正后的页面头部PHP代码

<?php
include('../includes/dbconnection.php');
include('../includes/session.php');
error_reporting(0);

if(isset($_POST['submit'])){
    $alertStyle = "";
    $statusMsg = "";

    // 验证参数是否存在
    if(!isset($_POST['courseTitle'], $_POST['courseCode'], $_POST['levelId'], $_POST['semesterId'])) {
        $alertStyle = "alert alert-danger";
        $statusMsg = "参数不完整！";
    } else {
        $courseTitle = $_POST['courseTitle'];
        $courseCode = $_POST['courseCode'];
        $levelId = $_POST['levelId'];
        $semesterId = $_POST['semesterId'];
        $dateAdded = date("Y-m-d");

        // 使用预处理语句插入数据
        $stmt = $con->prepare("insert into tblcourse(courseTitle,courseCode,levelId,semesterId,dateAdded) values(?,?,?,?,?)");
        $stmt->bind_param("sssis", $courseTitle, $courseCode, $levelId, $semesterId, $dateAdded);
        
        if ($stmt->execute()) {
            $alertStyle = "alert alert-success";
            $statusMsg = "科目创建并分配成功！";
        } else {
            $alertStyle = "alert alert-danger";
            $statusMsg = "发生错误：".$stmt->error;
        }
        $stmt->close();
    }
}
?>

内容的提问来源于stack exchange，提问作者KHeisenberg