如何在JavaScript和HTML中添加select选项时避免重复元素

AI 小北

2026-7-17

纯JS实现支出分类去重并生成唯一选项

步骤1：获取数据并提取去重分类

通过fetch拿到JSON数据后，先提取所有分类字段，利用Set的特性快速去重（Set不允许存储重复值）：

fetch('你的支出数据接口地址')
  .then(res => res.json())
  .then(expenseData => {
    // 从每条支出数据里提取分类字段
    const allCategories = expenseData.map(item => item.category);
    // 转成Set去重，再转回数组
    const uniqueCategories = [...new Set(allCategories)];
    // 调用生成选项的函数
    buildCategorySelect(uniqueCategories);
  })
  .catch(err => console.log('数据获取失败:', err));

步骤2：生成唯一分类选项

写自定义函数，把去重后的分类转换成select和option元素，插入到指定label下：

function buildCategorySelect(categories) {
  const categoryLabel = document.getElementById('category');
  
  // 先清空label原有内容，避免重复追加
  categoryLabel.innerHTML = '';
  
  // 创建select元素
  const selectEle = document.createElement('select');
  selectEle.id = 'expense-category'; // 可自定义id/name属性
  
  // 添加默认提示选项
  const defaultOpt = document.createElement('option');
  defaultOpt.value = '';
  defaultOpt.textContent = '请选择支出分类';
  selectEle.appendChild(defaultOpt);
  
  // 遍历去重后的分类生成选项
  categories.forEach(cat => {
    const opt = document.createElement('option');
    opt.value = cat;
    opt.textContent = cat;
    selectEle.appendChild(opt);
  });
  
  // 将select插入到label中
  categoryLabel.appendChild(selectEle);
}