In this post “Laravel 12 Bootstrap Multiselect Dropdown with Checkbox Example”, you’ll learn how to implement a Bootstrap multiselect dropdown with checkboxes in a Laravel application. This feature is commonly used when users need to select multiple values—such as countries, categories, or tags—from a single dropdown.
This example is compatible with Laravel 8, Laravel 9, Laravel 10, Laravel 11, and Laravel 12.
We’ll cover a step-by-step guide on how to:
- Build a form with a multiselect dropdown and checkbox options.
- Retrieve the selected values using Laravel’s request handling.
- Convert the selected data into JSON format using PHP’s json_encode() function.
- Save the values into the database using Eloquent models.
If you’re looking for a real-world Laravel how to store multi select values in database example, this post is for you. We’ll walk through creating the Blade template, writing the controller logic, and save data in database.
Create Blade File For Multiselect Dropdown
You can copy the full code from the Blade file and paste it into your own Blade template. However, if you prefer to copy only the necessary parts, make sure that the script shown in the image below is included in your file. This script is essential for the Bootstrap multiselect dropdown to function properly.
The script written below in the Blade file targets all <select> elements by default. If you prefer to apply it to specific elements only, you can use custom selectors such as a class, ID, or other attributes as needed.
<html>
<head>
<title>Laravel Bootstrap Multiselect Dropdown with Checkbox Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<style type="text/css">
.dropdown-toggle{
height: 40px;
}
.filter-option{
border:1px solid grey;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-3 mt-5">
<div class="card">
<div class="card-header bg-primary">
<h6 class="text-white">Laravel Bootstrap Multiselect Dropdown with Checkbox Example</h6>
</div>
<div class="card-body">
<form class="form-control" method="POST" action="{{route('store')}}">
@csrf
<div class="row">
<div class="col">
<select class="form-select" aria-label="Default select example" name="country_ids[]" multiple>
<option selected>Select Country</option>
<option value="1">India</option>
<option value="2">United States</option>
<option value="3">Canada</option>
<option value="4">Australia</option>
<option value="5">Germany</option>
</select>
</div>
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- plugin apply on dropdown: -->
<script type="text/javascript">
$(document).ready(function() {
//to style all select tag
$('select').selectpicker();
});
</script>
</html>
Laravel: How to Store Multiselect Dropdown Values in the Database
When the form is submitted from the Blade file, the selected country IDs are retrieved and converted into JSON format using PHP’s json_encode() function. This ensures the multiple selected values can be stored properly in the database. In this example, I’m using the TravelPlan model to save both the trip_name and the destination_countries.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\TravelPlan;
class DemoController extends Controller
{
public function store(Request $request)
{
$trip_name = "Test";
$country = json_encode($request->only(['country_ids']));
TravelPlan::create(['trip_name'=>$trip_name,'destination_countries'=>$country]);
dd("Data Saved Successfully");
}
}