如何打开引导选择菜单

Question

I am using bootstrap-select in a form with many entries. Now i would like to validate the form in a way that the user is guided more precisely through the missing fields. so i use:

$('html, body').animate 

to scroll to the missing field / select item and then:

field.focus();

to set the cursor into an input field

Now for the select items i would like to open the dropdown in that case.

Is there a way to do that?

i was trying the following thanks to tip from muggles:

function goToFormField(field){
    var offset=80;
    $('html, body').animate({
                scrollTop: field.parent().offset().top - offset
    }, 100,"easeInOutCirc",function(){
        if(field.is("input")){
            field.focus();
        }else if(field.is("select")){
            field.selectpicker('show')          
        }
    }
    );
}

but it did not work. EDIT: the mentioned function selectpicker('show') just shows the select-item, not the dropdown contents.

Thanks.

Answer 1

bootstrap-select only requires an open class to be added in the same class as select element, for example:

// To Open
$('.selectpicker').addClass('open');

// To Close
$('.selectpicker').removeClass('open');

Answer 2

Found a simple solution here :

$('.selectpicker').selectpicker('toggle')

Basically it toggles the open/close state. Therefore no refresh required.

Answer 3

I am assuming you are talking about this plugin for Bootstrap.

If so, according to the documentation , the plugin has a .show() method which programmatically shows the bootstrap select menu.

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

Answer 4

You can use the following code.

setTimeout(function(){
       $('#selector_id').next().click();
   }, 500);

It will click the toggle dropdown button and will make the dropdown-menu open. Just replace "selector_id" with your required id.