How to call event in Select2 Example

If you want to call an event when you are using the select2 autofill dropdown, the method little bit different than we normally use for calling an event in jquery through the class and ids from the tags.

So if you are using the select2 dropdown and want to fire any event like change, click, etc event, I will tell you how to select2 event call.

If you trying to call an event using the select2 dropdown and the select2 event not working, then this post will help you to fix the event calling issue in the select2 dropdown.

I will tell you how to call an event while you using the select2 autofill dropdown plugin, below I was given an example of a call change event from the select2 tags. just follow an example and apply in your application.

Style & Script

Call the style link and script in your application at the top of the head application page. Both scripts must be required for the use Select2 autofill dropdown.

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

Select Tag

Below example call a change using the select2 drop down, follow the sample code and execute in your application.

Given the class to the select tag "search-address", when I change on the class the change event will call from the script and console log "ok" as i given.

<select class="search-address form-control" id="change-add" name="state"></select>

Ajax Dynamic Data Call

$(".search-address").select2({
    ajax: {
        url: "URL FOR GET DATA",
        dataType: 'json',
        type: "GET",
        quietMillis: 50,
        data: function (term) {
            return {
                term: term
            };
        },
        processResults: function (data) {
            return {
                results: $.map(data.data, function (item) {
                    return {
                        text: item.name,
                        id: item.name
                    }
                })
            };
        },
    }
});

Solution 1

var $eventSelect = $(".search-address");
$eventSelect.select2();

$eventSelect.on("change", function (e) { 
    console.log('ok');
});

Solution 2

$(".select2").on("change", function () { alert() });

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)