动态显示和隐藏选择答案

【问题标题】：Show and hide select dynamically动态显示和隐藏选择
【发布时间】：2023-01-26 20:24:42
【问题描述】：

我动态地返回我的选择。我使用以下代码：

var data = [
   {Id: "1", },
   {Id: "2", },
   {Id: "3", },
   {Id: "4", },
   {Id: "5", },
   {Id: "6", },
];

$(document).on('click', '.dad-pagamento', function() {

  var linha = ``;
  for (var x = 0; x < data.length; x++) {

   linha += `<div class="col-3">
               <label id="atb11" style="margin-top: 5%;"><i class="pe-2x pe-va pe-7s-plus"></i> Ajudante</label>
               <div id="atbb22" style="display:none;">
                 <select class="js-states form-control ajuste singlet" name="auxiliar[]">
                   <option></option>
                   <option value="${data[x].Id}">${data[x].Id}</option>
                 </select>
               </div>
             </div>`;
   
   $(".pagmfalta").html(linha);
   $('#minhaDiv1').show();
   
   $(".singlet").select2({
    placeholder: "Selecione Ajudante",
    allowClear: true,
    width: '100%'
   });

   $('#atb11').on('click', function() {
    $('#atbb22').slideToggle('slow');
   });
  
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<button type="button" class="btn btn-info dad-pagamento" style="float: right; margin-right: 5%; margin-top: 4%;"><i class="metismenu-icon pe-7s-search"></i> Consultar </button>

<section id="s1">
  <div style="display:none" id="minhaDiv1">
        <div class="row pagmfalta">

        </div>
  </div>
</section>

我使用此代码来显示和隐藏选择：

$('#atb11').on('click', function() {
 $('#atbb22').slideToggle('slow');
});

问题是它返回多个选择并且我正在使用 id，它只打开第一个选择而不打开其他选择。

我打算根据自己的需要一个一个打开select。我不想点击一个选择，然后它们都打开

【问题讨论】：

您对多个元素具有相同的 id，您可以创建动态 ID，例如在 div 的 ID 中添加 x 变量
@Ahmed Ali pode colocar 嗯例子？
@Ahmed Ali ID 看起来像这样id="atb11${x}" and id="atbb22${x}"，但这段代码看起来如何？ $('#atb11').on('click', function() {$('#atbb22').slideToggle('slow');});
用 sn-p 检查我的答案。

标签： javascript html jquery

【解决方案1】：

正如我在 cmets 中提到的，您对多个元素具有相同的 id。

var data = [
   {Id: "1", },
   {Id: "2", },
   {Id: "3", },
   {Id: "4", },
   {Id: "5", },
   {Id: "6", },
];

$(document).on('click', '.dad-pagamento', function() {

  var linha = ``;
  for (var x = 0; x < data.length; x++) {
   linha += `<div class="col-3">
               <label id="atb11-${x}" style="margin-top: 5%;"><i class="pe-2x pe-va pe-7s-plus"></i> Ajudante</label>
               <div id="atbb22-${x}" style="display:none;">
                 <select class="js-states form-control ajuste singlet" name="auxiliar[]">
                   <option></option>
                   <option value="${data[x].Id}">${data[x].Id}</option>
                 </select>
               </div>
             </div>`;
   
   $(".pagmfalta").html(linha);
   $('#minhaDiv1').show();
   
   $(".singlet").select2({
    placeholder: "Selecione Ajudante",
    allowClear: true,
    width: '100%'
   });
$(document).on('click','#atb11-'+x,function(){
 
  $(this).next().slideToggle('slow');

});

  
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<button type="button" class="btn btn-info dad-pagamento" style="float: right; margin-right: 5%; margin-top: 4%;"><i class="metismenu-icon pe-7s-search"></i> Consultar </button>

<section id="s1">
  <div style="display:none" id="minhaDiv1">
        <div class="row pagmfalta">

        </div>
  </div>
</section>

【讨论】：