Hello web developers! In this article, we'll see how to add select2 in laravel 10. Here, in laravel 10 we'll use the select2 cdn file and also install the select package. Select2 not only enhances the appearance of your dropdowns but also adds powerful features like searching, tagging, and more.
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results
If you prefer using CDN (Content Delivery Network) files for Select2, you can follow these steps:
Create a laravel 10 project using the following command.
laravel new my-select2-project
cd my-select2-project
Open your blade file (e.g., resources/views/welcome.blade.php) and include the Select2 CDN links in the <head> section:
<!DOCTYPE html>
<html>
<head>
<title>How to Add Select2 in Laravel 10 Example - Vidvatek</title>
<!-- Include Select2 CSS CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<!-- Include jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Select2 JS CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<script>
$(document).ready(function() {
// Initialize Select2
$('#mySelect').select2();
});
</script>
</body>
</html>
If you prefer using NPM for Select2, you can follow these steps:
This will make it easier for you to deploy your project in different environments, and easily update Select2 when new versions are released
Run the following command to install Select2 via npm:
npm install select2
Open your webpack.mix.js file and add the following code to configure Laravel Mix to copy Select2 assets to the public directory:
mix.copy('node_modules/select2/dist/css/select2.min.css', 'public/css')
.copy('node_modules/select2/dist/js/select2.min.js', 'public/js');
Run the mix command to compile assets:
npm run dev
Open your blade file (e.g., resources/views/welcome.blade.php) and include the Select2 CSS and JS files:
<!DOCTYPE html>
<html>
<head>
<title>How to Add Select2 in Laravel 10 Example - Vidvatek</title>
<link rel="stylesheet" href="{{ asset('css/select2.min.css') }}">
<script src="{{ asset('js/select2.min.js') }}"></script>
</head>
<body>
<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<script>
$(document).ready(function() {
// Initialize Select2
$('#mySelect').select2();
});
</script>
</body>
</html>
Run your Laravel development server:
php artisan serve
You might also like:
- Read Also: How to Integrate Cashfree Payment Gateway in Laravel 10
- Read Also: Laravel 10 Select2 Autocomplete Search Using Ajax
- Read Also: How To Create Dependent Dropdown In Laravel
- Read Also: Dependent Dropdown In Laravel 9 Vue JS