Laravel8 调用API填充国家下拉框时编辑页已选值不显示问题

架构老林

2026-9-1

问题根因

已保存国家无法正常回显是两个逻辑漏洞导致的：

JS请求拿到全量国家列表后，直接用innerHTML完全替换select下的所有子节点，Blade初始渲染的带selected标记的已选国家选项被直接删除
动态生成option列表时，没有匹配用户已保存的国家值给对应选项加selected属性，列表渲染完成后无默认选中项

修复方案

调整Blade模板代码

移除select里提前写的空option，通过自定义data属性存储当前用户已保存的国家值，供后续JS读取：

<div class="col-sm-9 text-secondary">
    <select id="countries" name="country" data-selected="{{ $user->country }}">
    </select>
</div>

修改前端JS填充逻辑

动态生成option时，逐一对匹配已保存国家值的选项添加selected属性，保证列表渲染完成后自动选中对应值：

document.addEventListener('DOMContentLoaded', () => {
    const selectDrop = document.querySelector('#countries');
    const savedCountry = selectDrop.dataset.selected;

    fetch('https://restcountries.com/v3.1/all')
        .then(res => res.json())
        .then(data => {
            let optionStr = '';
            data.forEach(country => {
                const name = country.name.common;
                const selectedAttr = name === savedCountry ? 'selected' : '';
                optionStr += `<option value="${name}" ${selectedAttr}>${name}</option>`;
            })
            selectDrop.innerHTML = optionStr;
        })
        .catch(err => console.log(err));
});

可选优化项