Laravel Select2 Multiple Tutorial


Share:
Published By: Admin, Published On: Jun 26, 2021, Category: Laravel

Hello Friends,

Now let's see example of how to select2 multiple in laravel. This is a short guide on laravel if select2 multiple. We will use how to use select2 multiple in laravel. Here you will learn how to use select2 multiple in laravel. Let's get started with how to select2 multiple in laravel.

Here i will give you many example how you can select2 multiple in laravel.

Step 1 : Install Laravel 8

we need to get fresh laravel 8 version application So let's open terminal and run bellow command to install fresh laravel project.

composer create-project --prefer-dist laravel/laravel blog
Step 2 : Create Migration Table

You have to need to create migration. So let's open terminal and run bellow command.

php artisan make:migration create_employees_table

Path: database\migrations\create_employees_table

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateEmployeesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('employees', function (Blueprint $table) {
            $table->id();
            $table->string('employee_name');
            $table->string('email');
            $table->string('hobby');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('employees');
    }
}

After complete configuration and migrate all the tabel so let's open terminal run bellow artisan command:

php artisan migrate
Step 3 : Create Model

Ok, so after make model and put bellow content in Employee.php file:

Path: app\Models\Employee.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Employee extends Model
{
    use HasFactory;

    public $table = 'employees';

    public $fillable = ['employee_name','email','hobby'];
}
Step 4 : Add Route

We need to add route in laravel application.

<?php
    use App\Http\Controllers\EmployeeController;

    /*
    |--------------------------------------------------------------------------
    | 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('employee', [EmployeeController::class, 'index'])->name('employee');
        Route::post('employee', [EmployeeController::class, 'store'])->name('employee.store');
    });
?>
Step 5 : Create Controller

Here this step now we should create new controller as EmployeeController.

php artisan make:controller EmployeeController

Path: app/http/controller/EmployeeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employee;

class EmployeeController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
    */
    public function index()
    {
        return view('employee');
    }

    /**
     * Write code on Method
     *
     * @return response()
    */
    public function store(Request $request)
    {

        $input = $request->all();
            
        $request->validate([
            'employee_name' => 'required',
            'email' => 'required',
            'hobby' => 'required'
        ]);
        
        $input['hobby'] = implode(",",$request->hobby);

        $employees = Employee::create($input);


        return redirect()->route('employee.store');
    }
}
Step 6 : Create Blade File

In last step. we have to create blade file for select2 multiple. So finally you have to create following file and put bellow code:

Path: /resources/views/employee.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body class="bg-dark">
        <div class="container mt-5">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <div class="card">
                        <div class="card-header">
                            <h2>Laravel Select2 Multiple Example</h2>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('employee') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="form-group">
                                    <label for="text">Employee Name:</label>
                                    <input type="text" class="form-control" name="employee_name">
                                </div>
                                <div class="form-group">
                                    <label for="email">Email address:</label>
                                    <input type="email" class="form-control" name="email">
                                </div>
                                <div class="form-group">
                                    <label>Hobby:</label>
                                    <select id="hobby" name="hobby[]" multiple>
                                        <option value="">Select An Option</option>
                                        <option value="Dance">Dance</option>
                                        <option value="Sports">Sports</option>
                                        <option value="Reading">Reading</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-success">Submit</button>
                                <script>
                                    $('#hobby').select2({
                                        width: '100%',
                                        placeholder: "Select an Option",
                                        allowClear: true,
                                    });
                                </script>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Now run bellow command for quick run:

php artisan serve

Now open bellow URL on your browser:

localhost:8000/employee

It will help you....

Share: