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:

php artisan serve

Visit your app in the browser, and voilà! You now have a Select2 dropdown powered by Livewire in your Laravel 10 project.

 


You might also like:

Recommended Post
Featured Post
How to Install Composer on Ubuntu 22.04
How to Install Composer on Ubu...

Hey there! If you're diving into the world of PHP development on your Ubuntu 22.04 machine, you'll likely come a...

Read More

Jan-10-2024

How To Fixed Header In Datatable Using jQuery
How To Fixed Header In Datatab...

Data presentation and organization are easier with data tables. They help display information in an organized way. These...

Read More

Jan-05-2023

Laravel 10 Livewire Multi Step Form Wizard
Laravel 10 Livewire Multi Step...

Hello developers! Today, I'm excited to walk you through the process of creating a multi-step form wizard using...

Read More

Dec-18-2023

How To Get Current URL In React JS
How To Get Current URL In Reac...

As a React JS developer, I have come to appreciate the power and popularity of this remarkable JavaScript library. Its c...

Read More

Aug-09-2023