0

I have a problem with select2 in loop. I need to get the IDs of the dynamic inputs and start the select2 of each one.

Is there any simple way to do this? Because the way I'm using it, my code would be static and that would cause several problems.

Here is an example of how I'm doing it. I'm using Laravel with livewire, and I need this structure for the livewire to communicate with jQuery.

$(document).ready(function() {
  window.initSelectCompanyDrop = () => {
    $('#nome0').select2({
      placeholder: 'Selecione...',
      allowClear: true
    });
    $('#nome1').select2({
      placeholder: 'Selecione...',
      allowClear: true
    });
    $('#nome2').select2({
      placeholder: 'Selecione...',
      allowClear: true
    });
    $('#nome3').select2({
      placeholder: 'Selecione...',
      allowClear: true
    });
    $('#nome4').select2({
      placeholder: 'Selecione...',
      allowClear: true
    });
    $('#nome5').select2({
      placeholder: 'Selecione...',
      allowClear: true
    });
    $('#nome6').select2({
      placeholder: 'Selecione...',
      allowClear: true
    });
    $('#nome7').select2({
      placeholder: 'Selecione...',
      allowClear: true
    });
    $('#nome8').select2({
      placeholder: 'Selecione...',
      allowClear: true
    });
    $('#nome9').select2({
      placeholder: 'Selecione...',
      allowClear: true
    });
    $('#nome10').select2({
      placeholder: 'Selecione...',
      allowClear: true
    });
  }
  
  initSelectCompanyDrop();

  window.livewire.on('select2', () => {
    initSelectCompanyDrop();
  });
  
  $(document).on('change', '#nome0', function(e) {
    @this.set('nome.0', e.target.value);
  });
  $(document).on('change', '#nome1', function(e) {
    @this.set('nome.1', e.target.value);
  });
  $(document).on('change', '#nome2', function(e) {
    @this.set('nome.2', e.target.value);
  });
  $(document).on('change', '#nome3', function(e) {
    @this.set('nome.3', e.target.value);
  });
  $(document).on('change', '#nome4', function(e) {
    @this.set('nome.4', e.target.value);
  });
  $(document).on('change', '#nome5', function(e) {
    @this.set('nome.5', e.target.value);
  });
  $(document).on('change', '#nome6', function(e) {
    @this.set('nome.6', e.target.value);
  });
  $(document).on('change', '#nome7', function(e) {
    @this.set('nome.7', e.target.value);
  });
  $(document).on('change', '#nome8', function(e) {
    @this.set('nome.8', e.target.value);
  });
  $(document).on('change', '#nome9', function(e) {
    @this.set('nome.9', e.target.value);
  });
  $(document).on('change', '#nome10', function(e) {
    @this.set('nome.10', e.target.value);
  });
});

document.addEventListener("livewire:load", function(event) {
  window.livewire.hook('afterDomUpdate', () => {
    $('#nome0, #nome1, #nome2, #nome3, #nome4, #nome5, #nome6, #nome7, #nome8, #nome9, #nome10').select2({
      placeholder: 'Selecione...',
    });
  });
});
isherwood
  • 58,414
  • 16
  • 114
  • 157

0 Answers0