使用Bootstrap-select动态生成带Optgroup的下拉选框问题求助

可能的原因及对应解决方案 #

1. 后端返回数据存在重复/员工归属多部门 #

先检查AJAX请求返回的原始employeeData：如果同一个员工出现在多条记录里，或者同一员工被标记为属于多个部门，会直接导致分组后重复。

• 前端临时修复：按员工唯一ID去重

// 按员工ID去重，保留第一条出现的记录
const uniqueEmployees = [...new Map(employeeData.map(emp => [emp.id, emp])).values()];

2. 分组逻辑漏洞导致员工被重复添加 #

即使原始数据没问题，分组时可能误将员工添加到多个部门数组中。确保每个员工只归属一个部门：

function groupByDepartment(employees) {
  const groups = {};
  employees.forEach(emp => {
    const dept = emp.departamento.trim(); // 避免空格导致的假分组
    if (!groups[dept]) {
      groups[dept] = [];
    }
    // 检查当前部门是否已存在该员工
    const isDuplicate = groups[dept].some(e => e.id === emp.id);
    if (!isDuplicate) {
      groups[dept].push(emp);
    }
  });
  return groups;
}

3. 未清空旧下拉选项导致叠加 #

如果每次请求后直接追加HTML而不清空原有内容，旧的选项会和新选项叠加，看起来像是重复。必须先清空：

const $select = $('#crearcontrato_encargado_suplente');
// 清空现有所有选项和optgroup
$select.empty();

// 生成新的HTML模板
const grouped = groupByDepartment(uniqueEmployees);
let template = '';
Object.entries(grouped).forEach(([dept, emps]) => {
  template += `<optgroup label="${dept}">`;
  emps.forEach(emp => {
    // 必须用唯一value（比如员工ID），避免Bootstrap-select渲染异常
    template += `<option value="${emp.id}">${emp.nombre} - ${emp.rol}</option>`;
  });
  template += `</optgroup>`;
});

// 插入模板并刷新组件
$select.html(template);
$select.selectpicker('refresh');

4. 渲染时机错误 #

确保selectpicker('refresh')是在HTML插入DOM之后调用的，否则组件无法识别新的DOM结构。如果是异步AJAX请求，必须在success或then回调的最后执行刷新。

5. Bootstrap-select初始化问题 #

确认组件已正确初始化，且版本兼容：

// 页面加载完成后初始化selectpicker
$(document).ready(() => {
  $('#crearcontrato_encargado_suplente').selectpicker();
});

排查步骤 #

1. 在AJAX回调里console.log(employeeData)，检查原始数据是否有重复或多部门归属的员工。
2. 分组后console.log(grouped)，确认每个员工只出现在一个部门分组中。
3. 生成模板后console.log(template)，检查HTML结构是否正确，没有重复的option。
4. 确认每次渲染前都执行了$select.empty()，避免旧数据残留。

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