Livewire Create Multiple Select2 Dynamic Dropdown In Laravel 9 8 Example

  • 11-07-2022
  • 1861
  • Laravel 9
  • Haresh Chauhan

Laravel Livewire select2 with dynamic dropdown search tutorial; In this tutorial, we will learn how to set up a dynamic select2 dropdown. This is a power tool in this laravel livewire.

In this comprehensive example, We will comprehend how to create a select2 dynamic dropdown in livewire using the jQuery Select2 plugin in the laravel livewire application. This is laravel livewire select2 dynamic dropdown is incomplete without the select2 dropdown.

Select2 is a javascript-based package provided by an uncomplicated solution for creating a customizable selection with top-notch support for the searching.

Here below Laravel select2 dropdown preview output.

OUTPUT PREVIEW :
image

So let's start with how to integrate this package in laravel.

Step 1: Create Laravel Project

Use the below-suggested command in your terminal to clone the new fresh laravel project.

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

cd select2

Step 2: Install Livewire Composer

In this step, we will install laravel livewire composer into the project. Just copy the given command and run it in your terminal.

composer require livewire/livewire

Step 3: Create Select2 Component

To make a livewire component we will put a command in our terminal this command will create the blade file component and select2component in-app directory.

php artisan make:livewire select2-dropdown

Step 4: Setup Select2Dropdown Component

First, We will define ottPlatform as a blank string in this global variable append value from the select dropdown.

After, We will define $country a variable for a select country from the dropdown.

Then we will render it to the blade file and extend it to the base blade file.

app/http/Livewire/Select2DropDown.php 
<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Select2Dropdown extends Component
{
    public $ottPlatform = '';
    
    public $country = [
        "Bouvet Island",
        "Brazil",
        "British Indian Ocean Territory",
        "Brunei Darussalam",
        "Bulgaria",
        "Burkina Faso",
        "Burundi",
        "Cambodia",
        "Cameroon",
        "Canada",
        "Cape Verde",
        "Cayman Islands",
        "Central African Republic",
        "Chad",
        "Chile",
        "China",
        "Christmas Island",
        "Cocos (Keeling) Islands",
        "Colombia",
        "Comoros",
        "Congo",
        "Congo",
        "the Democratic Republic of the",
        "Cook Islands",
        "Costa Rica",
        "Cote d'Ivoire",
        "Croatia (Hrvatska)",
        "Cuba", 
    ];    
    
    public function render()
    {
        return view('livewire.select2-dropdown')->extends('livewire.layout.app');
    }
}

Step 5: Setup Blade File Component

In this component, we will add the select tag and loop that country inside the select box.

resources/views/livewire/select2-dropdown.blade.php 
<div>
    <div wire:ignore>
        <select class="form-control" id="select2-dropdown" multiple>
            <option value="">Select Option</option>
            @foreach($country as $item)
              <option value="{{ $item }}">{{ $item }}</option>
            @endforeach
        </select>
    </div>
</div>
@push('scripts')
<script>
    $(document).ready(function () {
        $('#select2-dropdown').select2();
        $('#select2-dropdown').on('change', function (e) {
            var data = $('#select2-dropdown').select2("val");
            @this.set('ottPlatform', data);
        });
    });
</script>
@endpush

Step 6: Setup Root Blade File Component

This is our root blade file where we will extend our select2-dropdown.blade.php file here.

resources/views/livewire/layout/app.blade.php 
<!DOCTYPE html>
<html>
<head>
    
    <title>Laravel 8 Livewire Dropdown Example</title>
    @livewireStyles
    <link href="//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <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>

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :