动态控制多个 Select 下拉框的显示与隐藏

本文讲解如何在动态生成多个 select 元素时，实现每个标签独立点击展开/收起对应下拉框，避免 id 重复导致的事件绑定失效及多次触发问题。

在使用 jQuery 动态渲染表单组件（如 ）时，一个常见误区是为多个元素分配相同 id（例如 id="atb11" 和 id="atbb22"），这不仅违反 HTML 规范（ID 必须唯一），还会导致 $('#atb11').on('click', ...) 仅作用于第一个匹配元素，其余无法响应。

要实现「逐个控制」——即点击某个「Ajudante」标签，只切换其紧邻的 容器，关键在于两点：

✅ 唯一标识符：为每个动态生成的 和 添加基于索引的唯一 ID，例如 atb11-0、atbb22-0、atb11-1、atbb22-1……
✅ 事件委托 + 精确目标定位：使用 $(document).on('click', '#atb11-'+x, ...) 绑定事件，并通过 $(this).next() 精准获取相邻的 容器，而非全局查找 #atbb22。

以下是优化后的核心逻辑（含关键注释）：

$(document).on('click', '.dad-pagamento', function() {
  var linha = '';
  for (var x = 0; x < data.length; x++) {
    linha += `
      
        
           Ajudante
        
        
          
            
            ${data[x].Id}
          
        
      `;
  }

  // 一次性写入全部 HTML（注意：原代码中 .html(linha) 在循环内执行，会导致重复覆盖，应移出循环）
  $(".pagmfalta").html(linha);
  $('#minhaDiv1').show();

  // 初始化所有 select2 实例
  $(".singlet").select2({
    placeholder: "Selecione Ajudante",
    allowClear: true,
    width: '100%'
  });

  // 为每个 label 绑定独立事件（使用事件委托，支持动态元素）
  for (var x = 0; x < data.length; x++) {
    $(document).on('click', '#atb11-' + x, function(e) {
      e.stopImmediatePropagation(); // 阻止其他同级事件处理器执行，防止重复绑定引发多倍触发
      $(this).next('div[id^="atbb22-"]').slideToggle('slow'); // 精准匹配下一个 div（推荐用属性选择器增强健壮性）
    });
  }
});

⚠️ 重要注意事项：

• 避免循环内重复 .html()：原代码在 for 循环中反复调用 $(".pagmfalta").html(linha)，每次都会覆盖前一次内容，最终只保留最后一个 。务必把拼接完成的完整 linha 在循环外一次性写入。
• stopImmediatePropagation() 不可少：若多次点击「Consultar」按钮，会重复为同一 ID 绑定 click 事件，导致点击一次触发多次 slideToggle。该方法确保当前 handler 执行后立即终止后续同类型事件传播。
• 推荐使用更健壮的选择器：$(this).next() 依赖 DOM 结构严格相邻；若结构可能变化，建议改用 $(this).closest('.col-3').find('> div[id^="atbb22-"]') 或添加统一类名（如 class="toggle-target"）进行定位。
• Select2 初始化时机：必须在 插入 DOM 后调用 .select2()，且不要对已初始化的元素重复调用（否则报错）。当前逻辑安全，因每次点击都重建整个列表。

总结：动态表单交互的核心是「唯一性 + 委托 + 精准定位」。通过索引化 ID、事件委托绑定、stopImmediatePropagation 控制执行流，并配合语义清晰的 DOM 关系查找，即可优雅实现任意数量 Select 的独立显隐控制。