关闭注册弹窗后用JavaScript更新父页面Select选项的实现

一、先准备后端接口（获取最新国家列表） #

新建一个obtener_paises.php文件，用来返回所有国家的JSON数据，供前端动态获取最新数据：

<?php
// 替换成你的数据库连接信息
$conn = mysqli_connect('localhost', '用户名', '密码', '数据库名');
mysqli_set_charset($conn, 'utf8');

// 查询所有国家并按名称排序
$query = "SELECT id_pais, nombre_pais FROM paises ORDER BY nombre_pais";
$result = mysqli_query($conn, $query);

$paises = [];
while ($row = mysqli_fetch_assoc($result)) {
    $paises[] = $row;
}

// 返回JSON格式数据
header('Content-Type: application/json');
echo json_encode($paises);
mysqli_close($conn);
?>

二、前端修改（registrar_autor.php） #

1. 调整弹窗打开逻辑，记录弹窗实例

把原来的跳转链接改成JS触发，方便监听弹窗状态：

<!-- 替换原添加国家的链接 -->
<a href="javascript:void(0)" onclick="abrirVentanaPais()">添加新国家</a>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var ventanaPais; // 保存弹窗实例

function abrirVentanaPais() {
    // 打开弹窗，自定义尺寸和位置
    ventanaPais = window.open('registrar_pais.php', 'nuevoPais', 'width=500,height=400,top=100,left=100');
    
    // 定时检查弹窗是否关闭
    var intervalo = setInterval(function() {
        if (ventanaPais.closed) {
            clearInterval(intervalo);
            // 弹窗关闭后立即更新下拉框
            actualizarSelectPaises();
        }
    }, 500); // 每500毫秒检查一次
}
</script>

2. 实现下拉框更新函数

写一个函数，用AJAX获取最新国家列表，更新下拉框时保留原选中值和其他输入内容：

function actualizarSelectPaises() {
    // 先保存当前下拉框的选中值
    var valorSeleccionado = $('#select_pais').val();
    
    // 发起AJAX请求获取最新国家数据
    $.ajax({
        url: 'obtener_paises.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            // 清空下拉框（保留默认提示选项）
            $('#select_pais').html('<option value="">请选择国家</option>');
            
            // 循环添加新的国家选项
            $.each(data, function(index, pais) {
                $('#select_pais').append(`<option value="${pais.id_pais}">${pais.nombre_pais}</option>`);
            });
            
            // 恢复之前的选中值
            if (valorSeleccionado) {
                $('#select_pais').val(valorSeleccionado);
            }
        },
        error: function() {
            alert('获取国家列表失败，请重试');
        }
    });
}

三、注意事项 #

• 确保registrar_pais.php中完成国家插入后，用window.close()关闭弹窗，这样才能触发检测逻辑。
• 数据库连接信息建议放在单独的配置文件中，避免硬编码泄露信息。
• 如果不用jQuery，也可以用原生JS的fetch实现AJAX，核心逻辑一致：保存选中值→请求数据→更新下拉框→恢复选中值。

内容的提问来源于stack exchange，提问作者Guillermo Jesús