How to Install Select2 in Laravel 10 Example

Websolutionstuff | Feb-14-2024 | Categories : Laravel PHP jQuery

Hey there, Laravel enthusiasts! If you're looking to add a touch of elegance and user-friendliness to your web forms, you're in the right place. In this step-by-step guide, we'll walk through the process of installing Select2 in laravel 10.

Select2 not only enhances the appearance of your dropdowns but also adds powerful features like searching, tagging, and more.

So, let's see how to install select2 in laravel 10 example, laravel 10 installs select2, select2 in laravel, select2 cdn, select2 jquery, select2 is not working, select2 dropdown, and how to add select2 with search in the dropdown in laravel 8, laravel 9 and laravel 10.

If you prefer using CDN (Content Delivery Network) files for Select2, you can follow these steps:

Step 1: Create a new Laravel 10 Project

Create a laravel 10 project using the following command.

laravel new my-select2-project
cd my-select2-project

Step 2: Include Select2 CDN in Your Blade File

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>Laravel 10 with Select2 - Websolutionstuff</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>

Install Select2 using NPM

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

Step 1: Install Select2 using npm

Run the following command to install Select2 via npm:

npm install select2

Step 2: Configure Laravel Mix

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

Step 3: Include Select2 Assets in Your Blade File

Open your blade file (e.g., resources/views/welcome.blade.php) and include the Select2 CSS and JS files:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 with Select2 using NPM - Websolutionstuff</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>

Step 4: Test Your Application

Run your Laravel development server: