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:

php artisan serve

That's it! You have successfully installed and configured Select2 in your Laravel 10 project.

 


You might also like:

Recommended Post
Featured Post
Laravel 8 User Roles and Permissions Without Package
Laravel 8 User Roles and Permi...

In this tutorial we will see laravel 8 user roles and permissions without package.Roles and permissions are an impo...

Read More

Sep-13-2021

How To Push Array Element In Node.js
How To Push Array Element In N...

Hello Dev, In this example we will see how to push array element in node.js example. I will share some example about&...

Read More

Oct-11-2021

Change Text Color Based On Background Color Using Javascript
Change Text Color Based On Bac...

In this article, we will see a change text color based on background color using javascript. Sometimes we have requ...

Read More

Dec-25-2020

Laravel 9 Firebase Push Notification
Laravel 9 Firebase Push Notifi...

In this article, we will see a laravel 9 firebase push notification, a firebase notification through you can notify...

Read More

Sep-20-2022