Skip to content

Instantly share code, notes, and snippets.

@yelocode
Created December 10, 2023 23:38
Show Gist options
  • Save yelocode/0e403fde4fbc669d96d898d20641dcfa to your computer and use it in GitHub Desktop.
Save yelocode/0e403fde4fbc669d96d898d20641dcfa to your computer and use it in GitHub Desktop.
MultiSelect Dropdown using livewire3 + select2
<?php
namespace App\Livewire;
use Livewire\Attributes\Url;
use Livewire\Component;
class Form extends Component
{
#[Url()]
public $companies = [];
public function save()
{
dump($this->companies);
}
public function render()
{
return view(
'livewire.form'
);
}
}
<div>
<div wire:ignore>
<select wire:model="companies" multiple id="testdropdown" class="w-full">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="HTC">HTC</option>
<option value="One Plus">One Plus</option>
<option value="Nokia">Nokia</option>
</select>
</div>
<button wire:click="save">Save</button>
@script()
<script>
$(document).ready(function() {
$('#testdropdown').select2();
$('#testdropdown').on('change', function() {
let data = $(this).val();
console.log(data);
// $wire.set('companies', data, false);
// $wire.companies = data;
@this.companies = data;
});
});
</script>
@endscript
</div>
@dcdebug
Copy link

dcdebug commented Apr 17, 2024

How you import the select2 (included the Jquery).

@dcdebug
Copy link

dcdebug commented Jun 17, 2024

? ? ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment