Laravel 9 Livewire Select2 Dropdown Tutorial with Example

Laravel 9 livewire select2 example; Through this tutorial, i am going to show you how to implement the livewire select2 dropdown in laravel 9 app.

Laravel 9 Livewire Select2 Dropdown Tutorial with Example

Follow the below given steps to implement select2 dropdown using livewire in laravel 9 apps:

  • Step 1: Install Laravel 9 App
  • Step 2: Add Database Detail
  • Step 3: Install Livewire Package
  • Step 4: Create Select2 Component using Artisan
  • Step 5: Add Route For Livewire Select2
  • Step 6: Create View File
  • Step 7: Run Development Server

Step 1: Install Laravel 9 App

Run following command on command prompt to install laravel fresh app for laravel livewire file upload app:

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

Step 2: Add Database Detail

To add database credentials in the .env file. So open your project root directory and find .env file. Then add database detail in .env file:

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

Run the following command on command prompt to create the table into your database:

php artisan migrate

Step 3: Install Livewire Package

Run the following command on command prompt to install livewire package to your laravel app:

composer require livewire/livewire

Step 4: Create Select2 Component using Artisan

Run the following command on command prompt to create the livewire components for creating a livewire select2 dropdown component:

php artisan make:livewire select2

This command will create the following components on the following path:

app/Http/Livewire/Select2.php

resources/views/livewire/select2.blade.php

Go to app/Http/Livewire folder and open Select2.php file. Then add the following code into your Select2.php file:

<?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');
    }
}

Go to resources/views/livewire folder and open select2.blade.php file. Then add the following code into your select2.blade.php file:

<div>
    <h1>Laravel 9 Livewire Select2 Example - Laratutorials.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 5: Add Route For Livewire Select2

Go to routes folder and open web.php. Then add the following routes into your web.php file:

<?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 6: Create View File

Go to resources/views/livewire folder and create one blade view files that name app.blade.php file. Then add the following code into your app.blade.php file:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example - Laratutorials.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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>
    
<div class="container">
    @yield('content')
</div>
    
</body>
  
@livewireScripts
@stack('scripts')
</html>
Note that, if you want to add HTML(blade views), CSS, and script code into your livewire files. So, you can use @livewireStyles, @livewireScripts, and @livewire(‘ blade views’).

Step 7: Run Development Server

Run the following PHP artisan serve command to start your laravel livewire upload file app:

php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

Now, you are ready to run laravel 9 livewire select2 app. So open your browser and hit the following URL into your browser:

localhost:8000/select2

Recommended Laravel Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published.