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.


namespace App\Http\Livewire;
use Livewire\Component;
class Select2 extends Component
    public $selCity = '';
    public $cities = [
     * Write code on Method
     * @return response()
    public function render()
        return view('livewire.select2-dropdown')->extends('');

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

    <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>
    $(document).ready(function() {
        $('#select2').on('change', function (e) {
            var data = $('#select2').select2("val");
            @this.set('selCity', data);


Step 5: Create Route

Create routes into the routes/web.php file.

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>
    <title>Laravel 10 Livewire Select2 Dropdown - Websolutionstuff</title>
    <script src="//"></script>
    <link href="//" rel="stylesheet" id="bootstrap-css">
    <script src="//"></script>
    <link href="[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="[email protected]/dist/js/select2.min.js"></script>
<div class="container">


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


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


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


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