Programmatically open the menu

[aagouda]

Is there a way to programmatically open the menu same effect as click the button to open, currently I am using this:

<select id="selectID">
...
</select>

$('[data-id="selectID"]').trigger('click');

[breiko83]

I do need the same behaviour, but your solution doesn't work for me.
Is there any other workaround?

[Jogai]

If you want it just to open as soon as the selectpicker is applied, you can just provide the open class on the original select element.

[turigeza]

In case anybody looking for the same thing.

Open Menu
$('.selectpicker').addClass('open');
$('.selectpicker').selectpicker('refresh');

Close Menu
$('.selectpicker').removeClass('open');
$('.selectpicker').selectpicker('refresh');

[MilenFrom]

Is there a way to keep it always open?
Even the page is refreshed or its clicked outside of the element?

[Jogai]

@turigeza Just use the open & close methods for that: http://silviomoreto.github.io/bootstrap-select/methods/#selectpickerhide

@MilenFrom apply the open class on the select (in html)

[MilenFrom]

Hi @Jogai I tried this and didn't work.
However, my solution was to trigger adding display:block; to the dropdown element on document change.

Code:
$(document).on('change','body',function(){
$('.dropdown-menu').css('display','block');
});

[Jogai]

how do you initialize the component?

[MilenFrom]

Hi @Jogai

First I've set a custom class to the form and initialized Bootstrap-Select for it.
$('.skillselect').selectpicker('toggle');
Then added display block to the dropdown menu of this class
$('div.skillselect > div.dropdown-menu').css('display','block');
Then added a check when something is changed on the body, as example item is chosen or the user clicks outside of this element to keep the display property block.
$(document).on('change','body',function(){ $('div.skillselect > div.dropdown-menu').css('display','block'); });

You can see the demo to see it how its working.
https://nuboyana.com/edit-profile/skills/?nocache=1

On the same site you can see other forms without this feature but with another class and they're working just fine.
https://nuboyana.com/edit-profile/details/?nocache=1

[Jogai]

Ok, you want it to stay open, thats slightly different.

This should be enough (though not compatible with screenreaders, like yours):

$('select').selectpicker('show');

$('.dropdown-menu').css('display','block');

I think the better solution is to cancel the close event.