Select2 On Change - Javascript

Select2 is a powerful jQuery plugin allows you to turn any HTML select element into a fully functional and customizable dropdown list with advanced features. In this article, we will focus on using the on change event in Select2.

Getting Started

Before we start, make sure you have the latest version of jQuery and Select2 installed. You can download them from their official websites, or use a CDN.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

Using Select2 on Change

Basic Usage

To use Select2 on change event, first you need to initialize a select element with Select2 plugin.

<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

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

Now you can bind an on change event to this select element using jQuery.

$('#mySelect').on('change', function() {
  console.log('Selected value:', $(this).val());
});

This will log the selected value to the console whenever the user changes the selection.

Advanced Usage

Select2 provides several methods and events that we can use to customize the behavior of our dropdown list. Here are some examples:

select2:select

This event is triggered when a new item is selected in the dropdown list. You can use it to perform some action based on the selected item.

$('#mySelect').on('select2:select', function(event) {
  var item = event.params.data;
  console.log('Selected item:', item);
});

This will log the selected item object to the console whenever the user selects a new item.

select2:unselect

This event is triggered when an item is removed from the selection. You can use it to perform some action based on the unselected item.

$('#mySelect').on('select2:unselect', function(event) {
  var item = event.params.data;
  console.log('Unselected item:', item);
});

This will log the unselected item object to the console whenever the user removes an item from the selection.

select2:open

This event is triggered when the dropdown list is opened. You can use it to perform some action before the list is displayed.

$('#mySelect').on('select2:open', function(event) {
  console.log('Dropdown list opened');
});

This will log a message to the console whenever the user opens the dropdown list.

select2:close

This event is triggered when the dropdown list is closed. You can use it to perform some action after the list is closed.

$('#mySelect').on('select2:close', function(event) {
  console.log('Dropdown list closed');
});

This will log a message to the console whenever the user closes the dropdown list.

Conclusion

Select2 is a versatile and powerful plugin that can greatly improve the user experience of your web application. By utilizing the on change event and other features provided by Select2, you can create a dynamic and interactive dropdown list that meets your specific requirements.