Laravel Bootstrap 4 Multiselect Dropdown with Checkbox

In this tutorial you will learn about the Laravel Bootstrap 4 Multiselect Dropdown with Checkbox and its application with practical example.

In this Laravel Bootstrap 4 Multiselect Dropdown with Checkbox tutorial I will show you how to create bootstrap 4 Multiselect Dropdown with Checkbox in laravel application. In this tutorial you will learn to integrate bootstrap multiselect dropdown in laravel application. In this article I will share example to select multiple dropdown options using checkbox in laravel. We will be using bootstrap 4 multiselect dropdown with checkbox. Then user will be able to select multiple dropdown options using checkbox.

Table Of Contents−

Laravel Bootstrap 4 Multiselect Dropdown with Checkbox

In this step by step tutorial I will demonstrate you how to create bootstrap 4 Multiselect Dropdown with Checkbox in laravel application. Please follow instruction given below:

Step 1 – Install Laravel 8 App
Step 2 – Connecting App to Database

Step 3 – Create Model and Migration
Step 4 – Add Routes
Step 5 – Create Controllers By Artisan

Step 6 – Create Blade Views
Step 7 – Run Development Server
Step 8 – Test This App

Step 1 – Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

1	composer create-project --prefer-dist laravel/laravel blog

Step 2 – Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name

DB_USERNAME=Enter_Your_Database_Username

DB_PASSWORD=Enter_Your_Database_Password

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Category -m

1	php artisan make:model Category -m

Now, go to database/migrations/ and open create_categorys_table.php file. Then update the following code into this file:

public function up()
{
    Schema::create('categories', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->timestamps();
    });
}

public function up()

{

Schema::create('categories', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->timestamps();

});

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Now, open Category.php model file and update the following code into it:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Category extends Model
{
    protected $fillable = [
        'name'
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Category extends Model

{

protected $fillable = [

'name'

];

}

Step 4 – Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\CategoryController;

Route::get('cat', [CategoryController::class, 'index']);
Route::post('store', [CategoryController::class, 'store']);

use App\Http\Controllers\CategoryController;

Route::get('cat', [CategoryController::class, 'index']);

Route::post('store', [CategoryController::class, 'store']);

Step 5 – Create Controllers by Artisan

Now, lets create a controller named CategoryController using command given below –

php artisan make:controller CategoryController

1	php artisan make:controller CategoryController

The above command will create CategoryController. Now, go to app/http/controller and open CategoryController.php.Then update the following methods into your controller file:

<?php
namespace App\Http\Controllers;
use App\Models\Category;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
class CategoryController extends Controller
{
    public function index()
    {
        return view('index');
    }
 
    public function store(Request $request)
    {
        $input = $request->all();
        $data = [];
        $data['name'] = json_encode($input['name']);
 
        Category::create($data);
 
        return response()->json(['success'=>'Recoreds inserted']);        
    }
}

<?php

namespace App\Http\Controllers;

use App\Models\Category;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Route;

class CategoryController extends Controller

{

public function index()

{

return view('index');

}

public function store(Request $request)

{

$input = $request->all();

$data = [];

$data['name'] = json_encode($input['name']);

Category::create($data);

return response()->json(['success'=>'Recoreds inserted']);

}

Step 6 – Create Blade Views

In this step we will create blade view files. Go to resources/views folder and create the blade view as following. Create a file name index.blade.php and update the following code into it:

<!DOCTYPE html>
<html>
<head>
<title>Multiselect Dropdown With Checkbox In Laravel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body class="bg-info">
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center">Multiselect Dropdown With Checkbox In Laravel</h2>
<br /><br />
<form method="post" id="category_form">
<div class="form-group">
<label>Select</label>
<select id="category" name="name[]" multiple class="form-control" >
<option value="Codeigniter">Codeigniter</option>
<option value="CakePHP">CakePHP</option>
<option value="Laravel">Laravel</option>
<option value="YII">YII</option>
<option value="Zend">Zend</option>
<option value="Symfony">Symfony</option>
<option value="Phalcon">Phalcon</option>
<option value="Slim">Slim</option>
</select>
</div>
<div class="form-group">
<input type="submit" class="btn btn-info" name="submit" value="Submit" />
</div>
</form>
<br />
</div>
</body>
<script>
$(document).ready(function(){
$('#category').multiselect({
nonSelectedText: 'Select category',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth:'400px'
});
$('#category_form').on('submit', function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url:"{{ url('store') }}",
method:"POST",
data:form_data,
success:function(data)
{
$('#category option:selected').each(function(){
$(this).prop('selected', false);
});
$('#category').multiselect('refresh');
alert(data['success']);
}
});
});
});
</script>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Multiselect Dropdown With Checkbox In Laravel</title>

</head>

<h2 align="center">Multiselect Dropdown With Checkbox In Laravel</h2>

<label>Select</label>

<option value="Codeigniter">Codeigniter</option>

<option value="CakePHP">CakePHP</option>

<option value="Laravel">Laravel</option>

<option value="Symfony">Symfony</option>

<option value="Phalcon">Phalcon</option>

</select>

</div>

</div>

</form>

<br />

</div>

</body>

$(document).ready(function(){

$('#category').multiselect({

nonSelectedText: 'Select category',

enableFiltering: true,

enableCaseInsensitiveFiltering: true,

buttonWidth:'400px'

});

$('#category_form').on('submit', function(event){

event.preventDefault();

var form_data = $(this).serialize();

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

$.ajax({

url:"{{ url('store') }}",

method:"POST",

data:form_data,

success:function(data)

{

$('#category option:selected').each(function(){

$(this).prop('selected', false);

});

$('#category').multiselect('refresh');

alert(data['success']);

}

});

</script>

</html>

Step 7 – Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/cat

1	http://localhost:8000/cat

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Step 1 – Install Laravel 8 App

Step 2 – Connecting App to Database

Step 4 – Add Routes

Step 5 – Create Controllers by Artisan

Step 6 – Create Blade Views

Step 7 – Run Development Server

Laravel 9 Livewire Pagination with Search

Laravel 9 Livewire Pagination Example

Laravel 9 Check User Login, Online Status & Last Seen

codeigniter 4 image upload example tutorial

Laravel 9 Livewire Charts Example

Laravel 9 Livewire Crud Example

Laravel 9 Livewire Multiple Image Upload

Laravel 9 Livewire Image Upload

Laravel 9 Livewire Submit Form

Laravel 9 Simple CRUD Application Example