Laravel Livewire Select2 Multiple Example

Laravel 8 , Laravel 7 , Laravel , Laravel 6




Hello Friends,

In this blog, I would like to share with you how to inetegrate select2 livewire in laravel application.I will show you a complete example for select2 multiple example with laravel livewire.

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.Livewire relies solely on AJAX requests to do all its server communicaton.

Here I will give full example for select2 in laravel livewire,So Lets follow the bellow step.

Step 1 : Install Laravel App

In First step, We need to get fresh laravel version application using bellow command. So Let's open terminal and run bellow command.

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Setup Database Configuration

After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.







Step 3 : Install Livewire

In this step, You will simply install livewire to our laravel application using bellow command:

composer require livewire/livewire

Step 4 : Create Post Table

In this step, We have to create migration for products table using bellow artisan command. So let's open terminal and run bello command :

php artisan make:model Product -m



use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration



* Run the migrations.


* @return void


public function up()


Schema::create('products', function (Blueprint $table) {








* Reverse the migrations.


* @return void


public function down()







namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Product extends Model


use HasFactory;

protected $fillable = ['name','category'];


Step 5 : Create Component

Now, You can create livewire component using bellow command, So Let's run bellow command to create Select2 form component:

php artisan make:livewire Select2

Now they created fies on both path:



Now first file we will update as bellow for Select2.php file.



namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\Product;

class Select2 extends Component


public $productList = [







'Dairy Product',


public $name,$category = [];

public function render()


return view('livewire.select2');


public function store()


$input = [

'name' => $this->name,

'category' => json_encode($this->category),



$this->name = '';

$this->category = '';




Step 6 : Add Route

now, we need to add route for create select2 dropdown and create product in laravel application. so open your "routes/web.php" file and add following route.



Step 8 : Create View

Here, we will create blade file for call route. in this file we will use @livewireStyles, @livewireScripts and @livewire('posts'). so let's add it.


<!DOCTYPE html>



<title>Laravel Livewire Select2 Multiple Example</title>

<script src="" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="" integrity="sha512-XKa9Hemdy1Ui3KSGgJdgMyYlUg1gM+QhL6cnlyTe2qzMCYm4nAZ1PsVerQzTTXzonUR+dmswHqgJPuwCq1MaAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />




<div class="container mt-5">

<div class="row justify-content-center mt-5">

<div class="col-md-8 mt-5">

<div class="card">

<div class="card-header bg-info text-white">

<h4>Laravel Livewire Select2 Multiple Example -</h4>


<div class="card-body">

@if (session()->has('message'))

<div class="alert alert-success">

{{ session('message') }}















<form wire:submit.prevent="store">

<div class="row">

<div class="col-md-12">

<div class="form-group">


<input type="text" wire:model="name" class="form-control">



<div class="col-md-12">

<div class="form-group">


<div wire:ignore>

<select id="category-dropdown" class="form-control" multiple wire:model="category">

@foreach($productList as $product)

<option value="{{$product}}">{{ $product }}</option>






<div class="col-md-12 text-center">

<button type="submit" class="btn btn-success">Save</button>







$(document).ready(function () {


$('#category-dropdown').on('change', function (e) {

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

@this.set('category', data);


window.livewire.on('productStore', () => {






Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:


It will help you..

Recommended Posts