There is another select2 dropdown post with laravel ( based on your composer php version it will be 9 or 10 ) which is built with latest asset bundling tool Vite. You can check this post here. This tutorial is about creating select2 dropdown using asset bundling tool mix which was used in earlier versions laravel.
Step 01: Adding a fresh laravel project. For this example we are using laravel 8.6.12
composer create-project laravel/laravel select2 "8.6.12"
Step 02: Creating HomeController.php with artisan command by going inside select2 folder with command cd select2
php artisan make:controller HomeController
Step 03: Setting up home route in web.php under routes folder
Route::get('/', [App\Http\Controllers\HomeController::class, 'create'])->name('create');
Step 04: Adding create() method inside HomeController with languages variable populating with values and passing it to blade view
public function create() { $languages = ['php','mysql','aws','machine learning', 'data science']; return view('create.form', compact('languages')); }
Step 05: Adding a layout file app.blade.php under resources/view folder
<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title> Select2 Usage </title> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> <!-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"> <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm"> <div class="container"> <a class="navbar-brand" href="{{ url('/') }}"> Select2 Usage </a> </div> </nav> <main class="py-4"> @yield('content') </main> </div> </body> </html>
Step 06: Adding a file form.blade.php under resources/views/create folder with select2 both single and multiple dropdown extending app layout and wrapping inside section directive
@extends('app') @section('content') <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">{{ __('Select2') }}</div> <div class="card-body"> <form method="POST" action=""> @csrf <div class="row mb-3"> <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Select Language') }}</label> <div class="col-md-6"> <select name="language" class="form-control languages basic-select2" > <option value="">--</option> @foreach ($languages as $key=>$language) <option value="{{ $key }}" >{{ $language }} </option> @endforeach </select> </div> </div> <div class="row mb-3"> <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Select multiple Language') }}</label> <div class="col-md-6"> <select class="form-control languages basic-select2" name="languages[]" multiple="multiple" > <option value="">--</option> @foreach ($languages as $key=>$language) <option value="{{ $key }}" >{{ $language }} </option> @endforeach </select> </div> </div> </form> </div> </div> </div> </div> </div> @endsection
Step 07: Installing frontend node packages for laravel
npm install
Step 08: Installing bootstrap, jquery and select2 plugin
//bootstrap composer require laravel/ui "^3.0" php artisan ui bootstrap //jquery npm install jquery //select2 npm install select2
Step 09: Bundling and watching node packages for laravel with mix. It will create public js and css file under public/js/app.js and public/css/app.css
npm run dev npm run watch
Step 10: Adding following snippet inside resources/js/app.js to include jquery, bootstrap and select2. Afterwards, triggering select2 plugin for classes those are named with "basic-usage"
window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js'); window.$ = window.jQuery = require('jquery'); window.select2 = require('select2'); $('.basic-select2').select2();
Step 11: Finally, adding following changes in resources/sass/app.scss for adding select2 css files for the project
@import "~select2/src/scss/core";
Now if we browse to this url http://localhost:8000 running artisan command php artisan serve we will see the form loaded with select2 dropdown both single and multiple option.