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
I know this is an old question but in order to do this using the API you would simply do the following:
Select2 API
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
Bootstrap 2
The
select2-dropdown-*mask*
didn't work for me, but the below did.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:
This also worked, but may not be preferred:
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. Thehide.bs.modal
worked a little smoother for us:I think this is what you're looking for. Here you have an example in JSFiddle created by me just now.
this one works for me
$("#select2-drop-mask").click();