How to use laravel livewire select2 dropdown?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Hello Dev’s
On this post i will give you a example of laravel livewire select2 example.On this post you can know about laravel livewire select2 dropdown. You can learn laravel livewire dropdown with from search. I will look at code of laravel livewire select2 dropdown. So let’s start bellow select2 laravel livewire alication.

Few days ago when i was looking about laravel livewire and saw, and there was many issues with laravel livewire select2 implement. So here i will give you step by step simple example of select2 laravel livewire. So you can use with any version of laravel 6, laravel 7 and laravel 8.

Finally Let’s follow bellow step and you will get bellow layout:

Step 1: Install Laravel 8

First of all we need a fresh Laravel 8 version application using bellow command. So now open your terminal OR command prompt, and run bellow command:

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

Step 2: Install Livewire

Now in this step,i will simply install livewire on my laravel 8 application. So using bellow command:

composer require livewire/livewire

Step 3: Create Component

Now here i will create livewire component using their command. So run bellow command to create select2 component.

php artisan make:livewire select2

Now they created fies on both path:

app/Http/Livewire/Select2.php

resources/views/livewire/select2.blade.php

Now both file we will update as bellow for our contact us form.

app/Http/Livewire/Select2.php

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
  
class Select2 extends Component
{
    public $selCity = '';
    public $cities = [
        'Rajkot',
        'Surat',
        'Baroda',
    ]; 
   
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.select2')->extends('layouts.app');
    }
}

resources/views/livewire/select2.blade.php

<div>
    <h1>Laravel Livewire Select2 Example - Codingspoint.com</h1>
    <strong>Select2 Dropdown: {{ $selCity }}</strong>
    <div wire:ignore>
        <select class="form-control" id="select2" >
            <option value="">-- Select City --</option>
            @foreach($cities as $city)
                <option value="{{ $city }}">{{ $city }}</option>
            @endforeach
        </select>
    </div>
</div>
  
@push('scripts')
<script>
    $(document).ready(function() {
        $('#select2').select2();
        $('#select2').on('change', function (e) {
            var data = $('#select2').select2("val");
            @this.set('selCity', data);
        });
    });
</script>
@endpush

Step 4: Create Route

now we will create one route for calling our example, so let’s add new route to web.php file as bellow:

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
 
use App\Http\Livewire\Select2;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('select2', Select2::class);

Step 5: Create View File

here, we will create blade file for call form route. In this file we will use @livewireStyles, @livewireScripts. So let’s add it.

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example -Codingspoint.com</title>
    @livewireStyles
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
    
<div class="container">
    @yield('content')
</div>
    
</body>
  
@livewireScripts
@stack('scripts')
</html>

Read also: How to telescope installation and configuration in laravel?

Now you can run using bellow command:

php artisan serve

Open bellow URL:

localhost:8000/select2 

I hope it will help you on development.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →

Leave a Reply

Your email address will not be published. Required fields are marked *

four + nineteen =