下拉选框加载JSON数据后选项文本不显示问题求助

问题描述 #

通过JavaScript函数从JSON文件获取数据填充下拉选框（select）时，选框列表可见但选项文本为空；点击空白选项能正常触发值注册，但无法查看选项内容。已尝试修改选框文本颜色为黑色，问题仍未解决。

问题根源 #

1. JSON字段名不匹配：JSON数据中的文本字段为nom，但JavaScript代码中错误使用app.name获取文本，导致选项文本被设置为undefined，视觉上显示为空。
2. 箭头函数符号错误：代码中使用了中文箭头→，而非JavaScript标准的英文箭头=>，会引发语法错误，影响函数正常执行。

修复方案 #

1. 修正JSON字段引用 #

将JavaScript中设置选项文本的代码从option.textContent = app.name;改为option.textContent = app.nom;，匹配JSON中的字段名。

2. 替换箭头函数符号 #

把所有中文箭头→替换为英文箭头=>，确保JavaScript语法合规。

3. 可选：验证文件路径 #

确认fetch('./json.json')中的路径正确，保证JSON文件存在于当前页面的相对路径下。

修正后的完整JavaScript代码 #

function populateApp() {
    fetch('./json.json')
    .then((response) => response.json())
    .then((json) => {
        const appli = document.getElementById('appli');

        json.forEach((app) => {
            const option = document.createElement('option');
            option.value = app.id;
            option.textContent = app.nom; // 匹配JSON中的nom字段
            appli.appendChild(option);
        });
    })
    .catch((error) => {
        console.error('Error fetching JSON:', error);
    });
}

验证方法 #

在页面加载时调用populateApp()函数，例如添加：

window.onload = populateApp;

此时下拉选框的选项文本应该会正常显示。

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