https://github.com/arifurdev/multiselect-inputs-with-livewire-3

This guide explains how to implement multiselect inputs with Livewire 3.
https://github.com/arifurdev/multiselect-inputs-with-livewire-3

laravel-livewire livewire3 multiselect multiselect-drodpdown multiselect-livewire select2

Last synced: 4 days ago
JSON representation

This guide explains how to implement multiselect inputs with Livewire 3.

• Host: GitHub
• URL: https://github.com/arifurdev/multiselect-inputs-with-livewire-3
• Owner: ArifurDev
• Created: 2024-06-26T07:21:01.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-06-26T08:19:30.000Z (6 months ago)
• Last Synced: 2024-10-31T05:05:08.078Z (about 2 months ago)
• Topics: laravel-livewire, livewire3, multiselect, multiselect-drodpdown, multiselect-livewire, select2
• Homepage:
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Using Multiselect Inputs with Livewire 3

This guide explains how to implement multiselect inputs with Livewire 3.

## Blade Template

### (resources/views/livewire/your-component.blade.php)

Add the following Blade code to your view. The `wire:ignore` directive is used to prevent Livewire from interfering with the jQuery plugin.

```blade



        Select Options:

        

                Volvo

                Saab

                Fiat

                Audi

        



```

# JavaScript

Include the following script in your Blade template to handle the change event of the multiselect input. This script will update the Livewire component's property **selectedOptions** with the selected values.

```js

@script

  

  

       $(document).ready(function() {

          $('#options').on('change', function(e){

              // let selectedValues =  e.target.value;

              let selectedValues =  $(this).val();

              $wire.$set('selectedOptions', selectedValues);

          });

      });

  

  

@endscript

```

## component 

### Livewire Component (app/Http/Livewire/YourComponent.php)

In your Livewire component class, declare the **selectedOptions** property.

```php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\Attribute;

class YourComponent extends Component

{

    public $selectedOptions = [];

    public function render()

    {

        return view('livewire.your-component');

    }

}

```

## Note

Make sure you have jQuery and the select2 library included in your project.

```

```

```

    $(document).ready(function() {

        $('.js-example-basic-multiple').select2();

    });

```