如何将Ajax响应中的不重复职业追加至Select下拉选择器？

没问题，我来帮你快速搞定这个需求！你已经拿到了用户数据并存在userArr里，接下来只需要两步：提取并去重职业，再把它们添加到你的select选择器中。

具体实现步骤 #

1. 提取并去重职业：利用JavaScript的Set对象自动去重的特性，从userArr中提取所有职业并过滤空值；
2. 生成选项并追加到Select：遍历去重后的职业列表，创建<option>标签并添加到目标select中。

修改后的完整Ajax代码 #

把这段代码插入到你现有Ajax请求的success回调里，放在填充userArr之后：

$.ajax({ 
  url: "/see/user", 
  success: function(users){ 
    const $user = $("#add_usr");
    const userArr = []; // 先声明数组，避免全局变量污染
    $.each(users, function(i, user){ 
      userArr.push({ 
        'id': user.id, 
        'firstName': user.profile.FirstName, 
        'lastName': user.profile.LastName, 
        'fullName': user.profile.FirstName + ' ' + user.profile.LastName, 
        'profesion': user.profesion, 
        'Is_active': user.Is_active 
      }); 
    });

    // --- 新增：职业去重并添加到Select ---
    // 提取所有非空职业并去重
    const uniqueProfessions = [...new Set(
      userArr.map(user => user.profesion).filter(profession => profession)
    )];
    
    // 替换成你实际的select选择器ID
    const $professionSelect = $("#profession-filter");
    
    // 清空原有选项（可选，防止多次请求重复添加）
    $professionSelect.empty();
    
    // 可选：添加一个"所有职业"的默认选项
    $professionSelect.append('<option value="">所有职业</option>');
    
    // 遍历去重后的职业，生成选项
    uniqueProfessions.forEach(profession => {
      $professionSelect.append(`<option value="${profession}">${profession}</option>`);
    });
  }
});

额外说明 #

• 记得把#profession-filter替换成你页面中select元素的真实ID；
• 如果不需要“所有职业”的默认选项，直接删掉对应的append代码即可；
• 如果职业存在大小写不一致的情况（比如Plumber和plumber），可以在提取时统一处理：

  const uniqueProfessions = [...new Set(
    userArr.map(user => user.profesion?.toLowerCase()).filter(prof => prof)
  )].map(prof => prof.charAt(0).toUpperCase() + prof.slice(1));
  

  这样就能保证去重后职业的首字母大写，显示更统一。

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