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
$("#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");
})
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");
});
this one works for me $("#select2-drop-mask").click();
The select2-dropdown-*mask* didn't work for me, but the below did.
$('#select2-drop').select2('close');
To close all in Bootstrap version 4 and above. Try:
$('body').trigger('mousedown');
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.
select2-dropdown.blur();
I think this is what you're looking for.
Here you have an example in JSFiddle created by me just now.
Related
I'm trying to create a dropdown menu with jSuites that fires a function once one of the items in the list is selected.
Unfortunately, I can't figure out how to fire the function. I tried with "onchange" both as attribute of the <div> and within the definition fo the jdropdown, but nothing seems to work.
I attach a fiddle here with a dropdown menu made with that works and does what it should, and two jSuites menus that should behave in the same way but they don't...
What am I doing wrong?
Can this be done at all?
Any help is welcome...
http://jsfiddle.net/2x4qnj1h/1/
use that instead:
onchange: refresh_dropdown,
you used a literal, not a function.
Documentation with examples : https://jsuites.net/v4/dropdown-and-autocomplete/events
Trying to build a guestbook with some jQuery features..
Now when im clicking at the "Post"box it appears a new box with the name "MenuBox" (This box is always hidden) i got the toggle part to work ALMOST.
The meaning of the MenuBox, is that it should show over the PostBox with a delete button so they can delete the post.
But now when i try to toggle it, it toggles all the boxes, is there a possible way of like making $("$(this) .MenuBox").click(
Anyone got any clue?
Sorry if the explanation is bad..
Provided that .MenuBox is a child of $(this):
$(this).find('.MenuBox').click(...);
I am trying to the Selectize library so I can have a comboboxes on my form.
So my form has a way to dynamically add more dropdowns (that i want to be comboboxes), so whenever the user adds a new dropdown, I want to apply Selectize combobox to it. So within my function that adds the new dropdown, after I have appended it, I use the following code:
$('select').each(function() {
if (!$(this).is('selectized')) {
$(this).selectize({
create: true,
sortField: 'text'
});
}
});
I thought that this would only apply it to dropdowns that do not already have Selectized combo box applied to it, but something is going wrong. Basically it is applying it to new comboboxes but something strange is going on with the existing ones. It's adding some kind of blank dropdown each time.
I tried to look around but I cannot find an "official" solution for combobox-ifying a newly added select fields. I don't know if it's an issue with how I am applying it, or if it's some kind of weird conflict with twitter bootstrap or jquery-ui or jquery itself (I included all of those in the fiddle)
Anyways, here is a link where you can see this issue in action:
http://jsfiddle.net/Qz7Ar/2/
Does anybody have experience with this or know what's going on here?
edit:
I also made a fork removing jquery-ui and bootstrap, so it's just jquery (required for Selectize) and Serialze, and the issue is still happening:
http://jsfiddle.net/Wxxub/1/
Okay well I figured out how to fix it..
If I add an id attrib to the new element and target by that instead, it works. Here is another fork demonstrating it:
http://jsfiddle.net/Wg7J6/1/
I can't find anywhere in the Selectize doc that it's necessary (I could be blind though!) that the select field must have an id or if it would work without one but i'm just doing it wrong or what, though.
I'm using the the following jquery libraries:
jQuery v1.10.1
jQuery UI v1.10.3
jquery multiselect 1.13
filter addon
When i use the multiselect filter on any select, it works just find.
When i use the multiselect filter inside the Dialog UI with property modal:true i cannot longer select to filter out the list - the placeholder of search, cannot be chosen.
Without the property modal:true, it works just fine.
I've tried to add the propery appendTo: 'form', but still having issues.
Edit: sample code
http://jsfiddle.net/dQzxJ/3/
Any ideas?
Thanks,
Eddie
This issue seems to be unsolved until now.
Bugs like this, I've been struggling with two months ago AND one day I asked myself: What about Chosen as Alternative? http://harvesthq.github.io/chosen/
Since I tried, satisfied I am.
There is a script to address a similar issue with CKEditor in a modal dialog which can be found here
for Eric Hynds' multiselect plugin add the following code to the _allowInteraction function:
if ($(event.target).closest(".ui-multiselect-menu").length) {
return true;
}
i am working in html for a custom drop down menu. I want to click the arrow and the list to open the hidden options, but nothing happens when i click the arrow? I do not know what is wrong. http://jsfiddle.net/Hunter4854/rrmJR/1/
The easiest solution might be to just bind the click event on the arrow so that it triggers the click even of the drop down like this:
$('.arrow').click(function() {
$('.custom-select').trigger('click')
});
jsFiddle example.
BTW, any reason why you're using such an old version of jQuery?
I simply put your .arrow div into the custom-select div and it's working. It doesn't really matter where to put your arrow since you position it absolutely) The working example: http://jsfiddle.net/skip405/rrmJR/6/