I have a native <select>-element based on which I'm initializing a select2-dropdown-menu. I bound a change-event via select2 which is called whenever the select2/select-option is changed. However, I need to fire the event even if the currently selected option is selected again.

function onSelectChange(){
    alert('changed');
};

$("#select").select2().bind('change', onSelectChange);

I prepared a / - if "Alaska" is currently selected and then selected again via the select2-dropdown, onSelectChange() should fire again, triggering the alert.

I have a hard time expressing myself, please ask if something isn't clear enough.

I have a native <select>-element based on which I'm initializing a select2-dropdown-menu. I bound a change-event via select2 which is called whenever the select2/select-option is changed. However, I need to fire the event even if the currently selected option is selected again.

function onSelectChange(){
    alert('changed');
};

$("#select").select2().bind('change', onSelectChange);

I prepared a http://jsfiddle/rb6pH/1/ - if "Alaska" is currently selected and then selected again via the select2-dropdown, onSelectChange() should fire again, triggering the alert.

I have a hard time expressing myself, please ask if something isn't clear enough.

• javascript
• jquery
• jquery-select2

• I can't get to fiddle at the moment, can you post a link to the plugin you are using? – Kevin B Commented May 10, 2013 at 16:01
• ivaynberg.github./select2 – brckmann Commented May 10, 2013 at 16:03
• 1 Can you explain your situation? Maybe there is some other event you can listen to. – Halcyon Commented May 10, 2013 at 16:10
• 2 Sorry, that makes absolutely no sense at all. It's 2013, you shouldn't be working with transparent elements to capture clicks anymore. – Halcyon Commented May 10, 2013 at 16:21
• 1 I think you should ask a question about the problem you're trying to solve (with this covoluted approach), rather than how to deal with the problems created by the solution you're trying. Further, please take a look at the 'What is the XY problem?' – David Thomas Commented May 10, 2013 at 16:23

6 Answers 6

Motivated by the absolutely valid remarks by @FritsvanCampen, I sat my ass down and figured out a way myself: What I really needed was a way to access the currently selected val, even if it hadn't changed. By using select2's undocumented close-event instead of change, I can access just that like so:

function onSelectChange(event){
    alert( $("#select").select2("val") );
};

$("#select").select2().bind('close', onSelectChange);

Find an updated jsFiddle at http://jsfiddle/rb6pH/42/

A similar question was asked here. I have made a fiddle for your question based on the code in the link. http://jsfiddle/rb6pH/55/

function onSelectChange(){
alert('changed');
};

var select2 = $("#select").select2().data('select2');

select2.onSelect = (function(fn) {
return function(data, options) {
    var target;

    if (options != null) {
        target = $(options.target);
    }

    if (target) {
        onSelectChange();
        return fn.apply(this, arguments);
    }
}
})(select2.onSelect);

I think you might refer to this link, i stuck once in same situation,

Change event is not fired when the selection is changed using Select2's val() method.

The event object contains the following custom properties:

val

the current selection (taking into account the result of the change) - id or array of ids.

added

the added element, if any - the full element object, not just the id

removed

the removed element, if any - the full element object, not just the id

For more information you might refer to this.

Thanks!

I read the question and it's so close to my problem so I decided not to post another question. What I want to do is after select2 closed, a simple text input bee focused but it doesn't work. please check

function onSelectChange(){
    alert('closed');
    $('#hey').focus();
};

$("#select").select2().bind('close', onSelectChange);
$('#hey').on('focusin)', function(){alert('in');}

http://jsfiddle/sobhanattar/x49F2/5/

I tried to make sure that the input bee focused and it showed that the input bee focused but I don't know why it doesn't show the curser

a little old question but i spent a few hours last week to find a solution.

I am using Select2 version: 4.0.5.

My working solution is this one:

$("#exampleId").on("select2:open", function() {
    var checkExist = setInterval(function() {
        var $selectedChoiceInsideSelect2Dropdown = $("li.select2-results__option[id^='select2-" + exampleId + "-result'][aria-selected=true]");
        if ($selectedChoiceInsideSelect2Dropdown.length) {
            $selectedChoiceInsideSelect2Dropdown.on("mouseup", function() {
                $(this).trigger("change");
            });
            clearInterval(checkExist);
        }
    }, 100); // check every 100ms
});

It's very important to use the interval!

 var prev_val = $('#select2').val();
 $('#select2').blur( function() {
    if( $(this).val() == prev_val )
       // not changed
    else {
       // changed
       prev_val = $(this).val();
    }
 });