How to Add Select Clear Select2 Dropdown

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

Hey everyone! Have you ever wanted to make your website's dropdown menus more interactive and user-friendly? Well, I've got just the thing for you! In this guide, I'll show you how to jazz up your dropdowns using a powerful tool called Select2 and a bit of jQuery magic.

In this article, you'll be able to easily add, select, and clear options in your dropdown menus with the help of jQuery in laravel 8, laravel 9, laravel 10, and PHP.

So, let's see how to clear the select2 dropdown, how to add an option in the select2 dropdown, how to select an option in select2, and how to reset the select2 dropdown.

Step 1: Set Up Your HTML

First things first, let's create the structure of our dropdown in the HTML. We'll need a select element with a unique identifier (ID) to target it later with jQuery. Here's a simple example:

<select id="mySelect2"></select>

 

Step 2: Include Necessary Dependencies

To use Select2, we need to include the required CSS and JavaScript files. You can download them or use a CDN. Here's how you can include them:

<link href="path/to/select2.min.css" rel="stylesheet" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/select2.min.js"></script>

 

Step 3: Initialize Select2

Next, we'll initialize Select2 on our select element using jQuery. This allows us to enhance its functionality and appearance. Here's how you can do it:

$(document).ready(function() {
    $('#mySelect2').select2();
});

 

Step 4: Adding Options Dynamically

Now, let's add some options to our dropdown dynamically. This could be from an API call, database, or any other data source. Here's an example of adding options programmatically:

var data = [
    { id: 1, text: 'Option 1' },
    { id: 2, text: 'Option 2' },
    { id: 3, text: 'Option 3' }
];

$('#mySelect2').select2({
    data: data
});

Example:

var data = {
    id: 1,
    text: 'Barn owl'
};

var newOption = new Option(data.text, data.id, false, false);
$('#mySelect2').append(newOption).trigger('change');

 

Step 5: Selecting Options

Selecting an option programmatically can be useful in various scenarios. Here's how you can do it:

$('#mySelect2').val('1').trigger('change');

Example:

$('#mySelect2').val(['1', '2']);
$('#mySelect2').trigger('change');

 

Step 6: Clearing Selection

If you need to clear the selected option(s), it's straightforward.

$('#mySelect2').val(null).trigger('change');

This code clears any selected option in the dropdown.

 

Conclusion

And there you have it! By following these simple steps, you can easily add, select, and clear options in a Select2 dropdown using jQuery.

 


You might also like:

Recommended Post
Featured Post
Laravel 9 CRUD With Image Upload Example
Laravel 9 CRUD With Image Uplo...

In this article, we will see the laravel 9 crud with an image upload example. Here, we will learn how to image upload wi...

Read More

Dec-09-2022

How to install GCC on Ubuntu 22.04
How to install GCC on Ubuntu 2...

Hello there! If you're diving into the world of programming on Ubuntu 22.04 and want to get your hands dirty with so...

Read More

Jan-15-2024

How to Convert Excel File into JSON in Javascript
How to Convert Excel File into...

Today in this small post i will show you how to convert excel file into json in javascript. Many time we have requi...

Read More

Jul-07-2021

How to Export CSV File in Laravel
How to Export CSV File in Lara...

In this post we will see how to export CSV file in laravel, Export csv file in laravel is most common function...

Read More

Apr-30-2021