How to Create Select2 Dropdown in Laravel 10 Livewire

Websolutionstuff | Feb-16-2024 | Categories : Laravel

Hello developers! Today, we're diving into the wonderful world of Laravel 10 and Livewire to create a Select2 dropdown that'll elevate the user experience of our web applications. Select2 is known for its sleek, feature-rich dropdowns, and combining it with the power of Livewire in Laravel 10 makes for a winning combination.

So, let's see how to create a select2 dropdown in laravel 10 livewire, laravel 10 livewire select2 dropdown, livewire select2 dropdown in laravel 8, laravel 9 and laravel 10, select2 livewire not working.

Step 1: Set Up a New Laravel 10 Project

First things first, let's create a new Laravel project. Open your terminal and run:

laravel new my-livewire-project
cd my-livewire-project

Step 2: Install Livewire

Laravel 10 comes with Livewire by default, but it's always good to double-check. Ensure that Livewire is installed using:

composer require livewire/livewire

Step 3: Create a Livewire Component

Generate a Livewire component to handle our Select2 dropdown:

php artisan make:livewire Select2Dropdown

This will create a Select2Dropdown.php file in the app/Http/Livewire directory.

Step 4: Design the Livewire Component Blade View

Open the Select2Dropdown.php file and define the Livewire component's view in the render method. We'll also include the Select2 CDN links.

app/Http/Livewire/Select2Dropdown.php

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

Now, create a new blade file at resources/views/livewire/select2-dropdown.blade.php:

<div>
    <h1>How to Create Select2 Dropdown in Laravel 10 Livewire - Websolutionstuff</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: Create Route

Create routes into the routes/web.php file.

<?php
  
use Illuminate\Support\Facades\Route;
 
use App\Http\Livewire\Select2Dropdown;
  
/*
|--------------------------------------------------------------------------
| 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', Select2Dropdown::class);

Step 6: Include Livewire and Select2 in Your Blade File

In your main blade file (e.g., resources/views/layouts/app.blade.php), include the Livewire and Select2 scripts:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Livewire Select2 Dropdown - Websolutionstuff</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>

Step 7: Test Your Select2 Dropdown

Run your development server: