如何基于MySQL填充的HTML下拉框选中值运行SQL查询

第一步：修改前端页面代码 #

首先在现有表单的下拉框下方新增结果展示容器，同时删除冗余的onchange属性，修改后的前端代码如下：

<!-- 如果页面已经引入过jQuery可以跳过这行 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

<form action="teampage.inc.php" method="POST">
    <div style="text-align: center;" class="split left">
        <p style="font-weight: bold; font-size:18px">My Teams</p>
        <label for="your_teams">Select a team:</label>
        <select class="form-select" style="width: 200px; display: block; margin: 0 auto;" name="your_teams" id="your_teams"> 
        <?php
        $pid1 = getUserData($_SESSION['username']);
        $pid2 = $pid1['id'];
        $q2 = 'SELECT `Team Name`  FROM Team WHERE Owner = :pid';
        $values = [':pid' => $pid2];
        try{
            $stmt2 = $conn->prepare($q2);
            $stmt2->execute($values);
        } catch (PDOException $e){
            echo "Error: " . $e->getMessage();
            die();
        }
        while($rows = $stmt2->fetch(PDO::FETCH_ASSOC))
            {
                $teams = $rows['Team Name'];
                echo "<option value = '$teams'>$teams</option>";
            }

        ?>
        </select> 
        <!-- 新增结果展示容器 -->
        <div id="team_result" style="margin-top: 20px;"></div>
    </div>
</form>

第二步：编写AJAX请求逻辑 #

将以下JS代码放在页面底部或者</body>标签之前即可：

<script>
// 监听下拉框选中变化事件
$('#your_teams').change(function() {
    // 获取当前选中的队伍名称
    let selectedTeam = $(this).val();
    // 发送POST请求到后端处理文件，可直接使用你现有的functions.php
    $.ajax({
        url: 'functions.php',
        type: 'POST',
        data: {
            action: 'get_team_info', // 新增action标识，用于区分其他功能请求
            team_name: selectedTeam
        },
        beforeSend: function() {
            // 加载过程中展示提示
            $('#team_result').html('<p>加载中...</p>');
        },
        success: function(res) {
            // 将后端返回的结果渲染到展示容器
            $('#team_result').html(res);
        },
        error: function() {
            $('#team_result').html('<p>请求出错，请重试</p>');
        }
    })
})
// 可选：页面初始化时自动加载第一个选中项的结果
$(document).ready(function() {
    $('#your_teams').trigger('change');
})
</script>

第三步：修改functions.php处理请求 #

在你现有的functions.php中新增对应处理逻辑即可，示例如下：

<?php
// 判断是否为下拉框发起的AJAX请求
if (isset($_POST['action']) && $_POST['action'] == 'get_team_info') {
    // 接收队伍名称参数，注意做过滤处理
    $teamName = trim($_POST['team_name']);
    // 调用你需要执行的PHP函数处理数据
    $result = your_custom_function($teamName);
    // 输出处理结果，直接返回给前端
    echo $result;
    // 终止后续逻辑，避免返回多余内容
    exit;
}

// 原有其他功能逻辑保持不变即可
?>

注意：后端接收team_name参数后一定要做校验和过滤，涉及数据库查询时优先使用PDO预处理语句，避免SQL注入风险。

可选无JS兼容方案 #

如果不想使用AJAX，也可以直接给下拉框添加自动提交表单的属性，修改select标签即可：

<select class="form-select" style="width: 200px; display: block; margin: 0 auto;" name="your_teams" id="your_teams" onchange="this.form.submit()">

之后直接在当前的teampage.inc.php中接收$_POST['your_teams']参数，执行对应函数输出结果即可，缺点是会刷新整个页面。

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