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

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

剪映专业版

一款全能易用的桌面端剪辑软件

下载

$(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 的独立显隐控制。