Select2 with livewire , wire:change not working

#1

Hello guys,
I’m trying to get the value of select onchange with livewire and select2 jquery but when I start select2 I can’t get the value, without select2 the value gets normally.

Code without select2 working normally:

<select class="form-control @error('tipo') is-invalid @enderror" wire:change="setSomeProperty($event.target.value)" name="tipo" value="{{ old('tipo', @$doc->id_tipo_nota) }}" >
              <option value="">Selecione..</option>
              @forelse ($tnfs as $tnf)
                @if (@$doc->id_tipo == $tnf->id_tipo_nota || old('tipo') == $tnf->id_tipo_nota)
                  <option selected='selected' value="{{ $tnf->id_tipo_nota }}">{{ $tnf->nome }}</option>
                @else
                  <option value="{{ $tnf->id_tipo_nota }}">{{ $tnf->nome }}</option>
                @endif
                @empty
              @endforelse
            </select>

Code with select2 does not work:

<select class="form-control select2 @error('tipo') is-invalid @enderror" wire:change="setSomeProperty($event.target.value)" name="tipo" value="{{ old('tipo', @$doc->id_tipo_nota) }}" >

              <option value="">Selecione..</option>

              @forelse ($tnfs as $tnf)

                @if (@$doc->id_tipo == $tnf->id_tipo_nota || old('tipo') == $tnf->id_tipo_nota)

                  <option selected='selected' value="{{ $tnf->id_tipo_nota }}">{{ $tnf->nome }}</option>

                @else

                  <option value="{{ $tnf->id_tipo_nota }}">{{ $tnf->nome }}</option>

                @endif

                @empty

              @endforelse

            </select>

Help please.

#2

Hey there. I find a solution for select2 and I’m going to share it with you, hope it solve your problem. In my case I use some js also Livewire like next.
The select element:

<select class="form-control col-sm-6" id="selectCompany">
    //do your stuff
</select>

In the custom script section:

$(document).ready(function() {
            window.initSelectCompanyDrop=()=>{
                $('#selectCompany').select2({
                    placeholder: 'Select a Company',
                    allowClear: true});
            }
            initSelectCompanyDrop();
            $('#selectCompany').on('change', function (e) {
                livewire.emit('selectedCompanyItem', e.target.value)
            });
            window.livewire.on('select2',()=>{
                initSelectCompanyDrop();
            });

        });

and in component:

public $company;
protected $listeners = [
        'selectedCompanyItem',
    ];

    public function hydrate()
    {
        $this->emit('select2');
    }
         //.......
public function selectedCompanyItem($item)
    {
        if ($item) {
            $this->company = Company::find($item);
            $this->emit('selectedCompanyId', $this->company->id);
        }
        else
            $this->company = null;
    }

and that’s all…for me work perfectly

2 Likes
#3

It’s PERFECT!

Thank you very much.

#4

Cool! Happy coding :blush: