如何修复 Select 下拉框选项文字不显示的问题

当 JavaScript 动态填充 <select> 时，若选项内容为空（仅显示空白），通常是因为读取了 JSON 中不存在的属性名（如误用 app.name 而实际字段为 app.nom），导致 textContent 被设为空字符串。

当 JavaScript 动态填充 `` 时，若选项内容为空（仅显示空白），通常是因为读取了 JSON 中不存在的属性名（如误用 `app.name` 而实际字段为 `app.nom`），导致 `textContent` 被设为空字符串。

在你的代码中，JSON 数据结构明确使用的是 nom 字段（例如 "nom":"name_App"），但 JavaScript 中却尝试访问 app.name：

option.textContent = app.name; // ❌ 错误：JSON 中无 'name' 字段

这会导致 app.name 为 undefined，进而使 option.textContent 被赋值为 undefined —— 浏览器将其转换为空字符串，因此下拉项看似“存在”却不可见。

正确写法应严格匹配 JSON 的键名：

option.textContent = app.nom; // ✅ 正确：对应 JSON 中的 "nom"

同时建议增强健壮性，避免因数据异常导致脚本中断：

function populateApp() {fetch('./json.json').then(response => {if (!response.ok) throw new Error(`HTTP ${response.status}`);return response.json();}).then(json => {const select = document.getElementById('appli');// 清空原有选项（除默认项外）while (select.options.length > 1) {select.remove(1);}json.forEach(app => {const option = document.createElement('option');option.value = app.id || ''; // 防御性赋值option.textContent = app.nom || '';// 关键修复：使用 'nom' 而非 'name'select.appendChild(option);});}).catch(error => {console.error('Failed to load applications:', error);// 可选：提示用户加载失败const placeholder = document.querySelector('#appli option:first-child');if (placeholder) placeholder.textContent = '--Chargement échoué--';});}

注意事项：

1. 始终校验 JSON 字段名与 JS 属性访问的一致性（区分大小写、拼写、语言习惯）；
2. 使用 console.log(app) 在 .forEach() 中调试，确认实际数据结构；
3. 避免直接操作 select.innerHTML（易引发事件丢失或性能问题），优先使用 document.createElement + appendChild；
4. 若需支持国际化或多语言，建议后端统一使用标准字段名（如 name），或在前端做映射转换。

修复后，下拉框将正确显示 nom 对应的文本，用户可直观选择，且表单提交时仍能通过 value 获取正确的 id。