How to Add Select Clear Select2 Dropdown

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.

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>

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>

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();
});

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');

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');

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.

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:

• Read Also: How to Create Select2 Dropdown in Laravel 10 Livewire
• Read Also: How to Filter Datatable using Dropdown in Laravel 10
• Read Also: How To Create Dependent Dropdown In Laravel
• Read Also: Laravel 8 Toastr Notifications Example