PHP实现MySQL下拉菜单联动：无需提交获取关联联系人

嘿，我来帮你搞定这个联动下拉的问题！你之前尝试全局变量的思路确实走不通——页面加载时全局变量只会保留循环最后一个公司的ID，而且没法实时响应用户的选择变化。咱们用AJAX无刷新请求来实现，完全不用提交页面，这才是这类需求的标准解决方案。

第一步：修正前端HTML结构并添加JavaScript监听 #

首先给两个下拉框加上唯一ID，方便JS获取元素；移除原来的全局变量逻辑，联系人下拉初始只留空选项，后续通过AJAX动态填充：

<div>
    <p>Company <span>*</span></p>
    <span class="icon-case"><i class="fa fa-comments-o"></i></span>
    <select name="company" id="companySelect">
        <option value=""></option>
        <?php
        $query = "SELECT company_id, name FROM `companies` ORDER BY `name` ASC";
        $result = mysqli_query($connection, $query) or die("Query failed: " . mysqli_error($connection));
        while ($row = mysqli_fetch_array($result)) {
            $company_id = $row["company_id"];
            $company_name = $row["name"];
            echo "<option value=\"$company_id\">$company_name</option>";
        }
        ?>
    </select>
</div>

<div>
    <p>Contact in Company <span>*</span></p>
    <span class="icon-case"><i class="fa fa-comments-o"></i></span>
    <select name="contact" id="contactSelect">
        <option value=""></option>
    </select>
</div>

<script>
// 监听公司下拉框的变化事件
document.getElementById('companySelect').addEventListener('change', function() {
    const companyId = this.value;
    const contactSelect = document.getElementById('contactSelect');
    
    // 清空现有联系人选项（保留空选项）
    contactSelect.innerHTML = '<option value=""></option>';
    
    // 如果用户选择空选项，直接终止逻辑
    if (!companyId) return;
    
    // 发送AJAX请求获取对应联系人
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'get_contacts.php?company_id=' + companyId, true);
    xhr.onload = function() {
        if (this.status === 200) {
            // 把返回的HTML选项插入到联系人下拉框
            contactSelect.innerHTML += this.responseText;
        }
    };
    xhr.send();
});
</script>

第二步：编写后端AJAX接口（get_contacts.php） #

新建一个get_contacts.php文件，专门处理根据公司ID获取联系人的请求，这里一定要用预处理语句防止SQL注入，同时关联contacts表获取联系人真实姓名（原代码只取了contact_id，用户体验不佳）：

<?php
// 复用你的数据库连接逻辑，比如引入包含$connection的文件
include 'your_db_connection_file.php';

if (isset($_GET['company_id']) && is_numeric($_GET['company_id'])) {
    $company_id = $_GET['company_id'];
    
    // 预处理查询，关联中间表和联系人表
    $query = "SELECT c.contact_id, c.name 
              FROM `contact_companies` cc 
              JOIN `contacts` c ON cc.contact_id = c.contact_id 
              WHERE cc.company_id = ? 
              ORDER BY c.name ASC";
    
    $stmt = mysqli_prepare($connection, $query);
    mysqli_stmt_bind_param($stmt, 'i', $company_id);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    
    $options = '';
    while ($row = mysqli_fetch_array($result)) {
        $contact_id = $row["contact_id"];
        $contact_name = $row["name"];
        $options .= "<option value=\"$contact_id\">$contact_name</option>";
    }
    
    echo $options;
}
?>

原代码的几个关键问题修正 #

• SQL语法错误：原查询WHERE company_id=$company_id; 缺少闭合引号，且直接拼接变量存在SQL注入风险，必须用预处理语句。
• 联系人下拉值错误：原代码把company_id作为选项value，应该用contact_id，才能正确提交联系人ID。
• 错误处理函数混用：原代码用了mysql_error()，但实际使用mysqli扩展，应改为mysqli_error($connection)。

这样修改后，用户选择公司时，联系人下拉会实时加载对应数据，完全不需要刷新页面，也不用全局变量，体验和安全性都能得到保障。

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