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
How to Search Comma Separated Values in Laravel
How to Search Comma Separated...

Today, in this post i will show you how to search comma separated values in laravel. Here, we will find specific id from...

Read More

Sep-15-2021

How to Install PHP PDO MySQL Extension in Ubuntu 22.04
How to Install PHP PDO MySQL E...

Hey there! If you're diving into PHP development on Ubuntu 22.04 and need to connect your applications to MySQL data...

Read More

Feb-28-2024

How to Install Node JS and NPM on Ubuntu 22.04
How to Install Node JS and NPM...

Hey fellow Ubuntu enthusiasts! 🐧✨ If you're looking to step into the awesome world of Node.js and npm for your web d...

Read More

Jan-12-2024

How To Disable Future Date In jQuery Datepicker
How To Disable Future Date In...

In this tutorial, we will see how to disable future dates in jquery datepicker. In the date picker, today's dat...

Read More

Jun-17-2022