基于PHP+MVC+PDO实现下拉选框联动填充输入字段求助

问题根源 #

你当前的方案有两个核心问题：

1. 视图中直接使用的$r->rut等变量仅在foreach循环的作用域内有效，循环结束后$r不存在，导致输入框无法获取正确值
2. 缺少前端与后端的实时交互逻辑，无法在选中下拉选项后动态拉取对应公司数据

以下是完整的修复方案：

1. 修正下拉选框的value值 #

将下拉选项的value从公司名称改为唯一ID（比如数据表中的id_empresa），避免名称重复导致查询错误：

<div class="col-md-4 mt-3">
    <div class="form-floating">
        <label for="floatingName">Empresa</label>
        <select name="empresa" id="empresa" class="form-select" style="height:80px;" placeholder="Empresa">
            <option value=""></option>
<?php 
foreach($this->model->TraerEmpresas() as $r): 
?>
            <option value="<?php echo $r->id_empresa; ?>"><?php echo $r->razonsocial; ?></option>
<?php 
endforeach; 
?>
        </select>
    </div>
</div>

2. 在模型中新增单条公司数据查询方法 #

在你的模型类中添加根据ID获取公司详情的方法：

public function TraerEmpresaPorId($id)
{
    try
    {
        $stm = $this->pdo->prepare("SELECT * FROM empresas WHERE id_empresa = ?");
        $stm->execute([$id]);
        return $stm->fetch(PDO::FETCH_OBJ);
    }
    catch(Exception $e)
    {
        die($e->getMessage());
    }
}

3. 新增控制器AJAX接口 #

在控制器中添加处理AJAX请求的方法，返回JSON格式的公司数据：

public function getEmpresaDetails()
{
    if(isset($_POST['id_empresa'])){
        $id = $_POST['id_empresa'];
        $empresa = $this->model->TraerEmpresaPorId($id);
        echo json_encode($empresa);
        exit;
    }
}

注意：确保你的路由配置能正确映射到该方法，比如/tu-controlador/getEmpresaDetails

4. 前端添加AJAX交互逻辑 #

在视图页面底部添加JavaScript代码，监听下拉框变化事件，动态填充表单：

document.getElementById('empresa').addEventListener('change', function() {
    const empresaId = this.value;
    // 选中空选项时清空表单
    if(empresaId === ''){
        document.querySelector('input[name="rut_dest"]').value = '';
        document.querySelector('input[name="tel_emp_dest"]').value = '';
        document.querySelector('input[name="direccion_dest"]').value = '';
        document.querySelector('input[name="mail_emp_dest"]').value = '';
        return;
    }

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/tu-controlador/getEmpresaDetails', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
        if(this.status === 200){
            const empresa = JSON.parse(this.responseText);
            if(empresa){
                document.querySelector('input[name="rut_dest"]').value = empresa.rut || '';
                document.querySelector('input[name="tel_emp_dest"]').value = empresa.telefono || '';
                document.querySelector('input[name="direccion_dest"]').value = empresa.direccion || '';
                document.querySelector('input[name="mail_emp_dest"]').value = empresa.email || '';
            }
        }
    };
    xhr.send('id_empresa=' + encodeURIComponent(empresaId));
});

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