如何将JSON数据按列生成表格中的下拉选择框？

你的代码目前存在两个核心问题：

• 直接将<option>标签塞进<td>中，未用<select>标签包裹，无法形成有效的下拉选择框
• 循环逻辑错误，会为每一行数据重复生成零散的选项，而非为整列生成一个包含所有对应值的下拉框

以下是修正后的完整实现：

先确保HTML表格结构合理 #

假设你的表格已提前预留好放置下拉框的单元格：

<table id="bookTable">
  <thead>
    <tr>
      <th>作者</th>
      <th>国家</th>
      <!-- 其他表头可按需添加 -->
    </tr>
  </thead>
  <tbody>
    <tr id="filterRow">
      <td><select id="authorSelect"></select></td>
      <td><select id="countrySelect"></select></td>
    </tr>
  </tbody>
</table>

修正后的JavaScript代码 #

// 获取页面上的下拉框元素
const authorSelect = document.getElementById('authorSelect');
const countrySelect = document.getElementById('countrySelect');

// 提取数组中指定键的唯一值
function getUniqueValues(arr, key) {
  return [...new Set(arr.map(item => item[key]))];
}

fetch("kitap.json")
  .then(res => res.json())
  .then(data => {
    const books = data.kitap;
    
    // 生成作者下拉选项
    const uniqueAuthors = getUniqueValues(books, 'author');
    uniqueAuthors.forEach(author => {
      const option = document.createElement('option');
      option.value = author;
      option.textContent = author;
      authorSelect.appendChild(option);
    });

    // 生成国家下拉选项
    const uniqueCountries = getUniqueValues(books, 'country');
    uniqueCountries.forEach(country => {
      const option = document.createElement('option');
      option.value = country;
      option.textContent = country;
      countrySelect.appendChild(option);
    });
  })
  .catch(err => console.error('数据加载失败:', err));

关键说明 #

• 用Set提取唯一值，避免下拉框出现重复选项
• 通过document.createElement创建DOM元素，比直接拼接HTML字符串更安全、易维护
• 先获取完整数据集，再统一生成下拉选项，避免重复渲染

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