动态表单新增后Dropdown无法加载MySQL数据求助

首次加载的下拉框是PHP在页面渲染阶段生成的，此时mysqli_fetch_array($query)会遍历数据库查询结果并输出选项。但通过前端JS动态新增表单时，PHP代码已经执行完毕，无法再为新的下拉框生成数据库选项，导致新下拉框为空。

提供两种可行方案，根据数据更新频率选择：

方案1：提前将数据库数据存入JS变量（推荐，减少后端请求） #

先把PHP查询到的选项转成JS数组，新增表单时直接复用该数组生成选项：

<?php
// 先把数据库查询结果存入PHP数组
$namaList = [];
while($row = mysqli_fetch_array($query)){
    $namaList[] = $row["nama"];
}
?>

<!-- 原有的初始下拉框（保留不变） -->
<select name="nama[]" class="form-control" placeholder="Nama Lengkap">
    <?php
    foreach($namaList as $nama){
        echo '<option value="'.$nama.'">'.$nama.'</option>';
    }
    ?>
</select>

<script>
// 将PHP数组转为JS可直接使用的数组
const namaOptions = <?php echo json_encode($namaList); ?>;

// 新增表单的函数（示例）
function addNewForm() {
    // 创建下拉框元素
    const newSelect = document.createElement('select');
    newSelect.name = 'nama[]';
    newSelect.className = 'form-control';
    
    // 添加默认提示选项
    const defaultOpt = document.createElement('option');
    defaultOpt.value = '';
    defaultOpt.textContent = 'Pilih Nama';
    newSelect.appendChild(defaultOpt);
    
    // 循环生成数据库选项
    namaOptions.forEach(nama => {
        const opt = document.createElement('option');
        opt.value = nama;
        opt.textContent = nama;
        newSelect.appendChild(opt);
    });
    
    // 将新下拉框添加到页面容器（需提前在页面定义id为formContainer的容器）
    document.getElementById('formContainer').appendChild(newSelect);
}
</script>

方案2：AJAX实时请求后端获取数据（适合数据实时更新场景） #

写一个独立的PHP接口返回选项数据，新增表单时通过AJAX请求获取：

1. 后端接口文件（示例：get-nama-options.php） #

<?php
// 数据库连接（替换为你的实际连接信息）
$conn = mysqli_connect('localhost', '用户名', '密码', '数据库名');
// 执行查询（替换为你的实际表名）
$query = mysqli_query($conn, "SELECT nama FROM your_table");

$options = [];
while($row = mysqli_fetch_array($query)){
    $options[] = $row["nama"];
}
// 返回JSON格式数据
echo json_encode($options);
?>

2. 前端新增表单函数 #

function addNewForm() {
    const newSelect = document.createElement('select');
    newSelect.name = 'nama[]';
    newSelect.className = 'form-control';
    
    // 添加默认提示选项
    const defaultOpt = document.createElement('option');
    defaultOpt.value = '';
    defaultOpt.textContent = 'Pilih Nama';
    newSelect.appendChild(defaultOpt);
    
    // AJAX请求获取选项
    fetch('get-nama-options.php')
        .then(res => res.json())
        .then(options => {
            options.forEach(nama => {
                const opt = document.createElement('option');
                opt.value = nama;
                opt.textContent = nama;
                newSelect.appendChild(opt);
            });
        })
        .catch(err => console.error('获取选项失败：', err));
    
    document.getElementById('formContainer').appendChild(newSelect);
}

• 避免重复id：初始下拉框的id="editable-select1"不要复用在新增的下拉框上，可动态生成唯一id或直接去掉id（name="nama[]"已满足表单提交需求）
• 数据库安全：建议使用预处理语句防止SQL注入，避免直接拼接查询语句
• 表单容器：页面需提前定义用于存放新增表单的容器（如<div id="formContainer"></div>）

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