CODEWITHSUNDEEP
javascripthtmljquery
Bruno
Bruno

Reputation: 1055

Show and hide select dynamically

I return my select dynamically. I use the following code:

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/[email protected]/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>

I use this code to show and hide the select:

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

The problem as it returns more than one select and I am using id, it only opens the first select and not the others.

I intend to open select one by one according to my needs. I don't want to click on a select and they all open

Upvotes: 0

Views: 86

Answers (1)

Ahmed Ali
Ahmed Ali

Reputation: 1964

As I mentioned in the comments, you have some id for multiple elements. You have to append the index variable x with id to make ids unique for each element.
Secondly, add .on(click) that delegates the event for both current and future elements.
check: This answer
See the working example below:

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(e){

        e.stopImmediatePropagation(); //Keeps the rest of the handlers from being executed 

        $(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/[email protected]/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>

The issue you mentioned in comments ( .on() is triggering event multiple times) can be solved by adding event.stopImmediatePropagation().
Check docs, It will stops rest of the handlers from being executed.

Upvotes: 2

Related Questions