close select2 dropdown via javascript/jquery

Question

Good day, How can I properly close a select2 dropdown via jquery or javascript??

for now Im using select2-dropdown.toggle() to close it,

but I noticed that It will simply hide the list and the select2 box is still being highlighted

I want to lost focus it or something like that just to close it properly and be able to come up with a result like this one .

by the way the screen shots are dark because those select2 boxes are under a bootstrap modal that would come up whenever I press enter.

Any advice would really be appreciated! Thanks in advance

Orthopedic

Try -> focus on any other element . – Tsarevna

thank you @TusharGupta for your suggestion, but I already did that, I did set my textbox on my modal to be focused whenever the modal is shown. – Orthopedic

Answer 1

this one works for me $("#select2-drop-mask").click();

Orthopedic

Answer 2

I know this is an old question but in order to do this using the API you would simply do the following:

Select2 API

 $("#select2-drop-mask").select2("close");

The question also mentions bootstraps modal dialog which tends to be a reason why people want to close it programmatically.

For anyone's info this is how you do that:

Bootstrap 3

$('#myModal').on('hidden.bs.modal', function () {
  $('#select2-drop-mask').select2("close");
})

Bootstrap 2

$('#myModal').on('hidden', function () {
   $('#select2-drop-mask').select2("close");
})

Dunseath

Answer 3

In v4.0, none of the other answers worked for me. Using jQuery to select just the mask had no effect. I had to use the id of the select box itself:

$("#mySelectElement").select2("close")

This also worked, but may not be preferred:

$("#mySelectElement").select2().trigger("select2:close");

Documentation

Also, for Bootstrap 3, the hidden.bs.modal event was too late and the select2 mask would linger for a second during the animation. The hide.bs.modal worked a little smoother for us:

$('#modalYourModal').on('hide.bs.modal', function () {
    //close select2 in case its open
    $("#mySelectElement").select2("close");
});

Trimming

the second method worked for me on BS5, thanks – Insecticide

Answer 4

The select2-dropdown-*mask* didn't work for me, but the below did.

$('#select2-drop').select2('close');

Adaptive

@stevemoretz - Is there any way to close them by class? (without needing to use each ID) – Righthanded

@BeninCA probably by using $('.id').each(function()){$(this).select2('close');} – Streaky

@stevemoretz - tried like this, but no go: $('.select2').each(function(){$(this).select2('close');}) – Righthanded

Posted a new question instead: #58348127 – Righthanded

@BeninCA That's why I said probably these stuffs are a bit wired.especially in different versions you get different results.Hope that new question gonna get nice and up to date answers – Streaky

Answer 5

To close all in Bootstrap version 4 and above. Try:

$('body').trigger('mousedown');

Intermigration

Thanks @Intermigration $(document.body).trigger('mousedown'); worked for me on BS4 – Concentrated

Answer 6

All select2 elements has class select2-hidden-accessible. So we can use this class in selector and close all of them

$('.select2.select2-hidden-accessible').select2('close');

or try to close only one of them with id selector.

Limpkin

Answer 7

select2-dropdown.blur();

I think this is what you're looking for. Here you have an example in JSFiddle created by me just now.

Signac

thank your @Signac for your answer, Thats also what I thought, that I should use blur() function, but its still not functioning. Im using the textbox by the way, because you cant use the select2's ajax function on "select" – Orthopedic