本文解决因 JavaScript 动态填充 时属性名不匹配（如误用 app.name 而 JSON 中实际为 app.nom）导致选项文本为空、下拉项显示空白的问题。
本文解决因 javascript 动态填充 `
在使用 JavaScript 从 JSON 数据动态生成 下拉选项时，一个常见却极易被忽略的错误是：JavaScript 中读取的属性名与 JSON 数据的实际字段名不一致。您提供的 JSON 数据结构如下：
[{"id":"id_App","nom":"name_App"}, {"id":"id_App","nom":"name_App"}]
可见，表示应用名称的字段是 "nom"，而非 "name"。但在您的 JavaScript 代码中，却写成了：
option.textContent = app.name; // ❌ 错误：JSON 中没有 "name" 字段
由于 app.name 是 undefined，textContent 被赋值为 undefined，浏览器将其渲染为空字符串——这正是下拉框看似“空白”、点击却能正常提交值的根本原因。
✅ 正确写法应为：
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);
});
}
? 额外建议与注意事项：
-
字段名一致性检查：建议在开发阶段先用
console.log(json)打印数据结构，确认字段名拼写、大小写（JSON 是严格区分大小写的）； -
健壮性增强：可添加空值判断，避免因个别数据缺失字段导致脚本中断：
option.textContent = app.nom || '未知应用';
-
HTML 结构优化：
的hidden属性仅隐藏默认项，不影响交互；若需默认提示项，推荐使用disabled+selected更符合语义：<option value="" disabled selected>--Veuillez sélectionner une application--</option>
只要修正属性引用，下拉菜单将立即正确显示 nom 对应的文本内容。这不是样式或 CSS 问题，而是数据绑定逻辑错误——请始终以实际 JSON 结构为准，而非凭经验假设字段名。
