Question

我在一个包含许多条目的表单中使用bootstrap-select。现在，我想以一种方式验证表单，以便更准确地通过缺少的字段引导用户。所以我用：

$('html, body').animate

滚动到缺少的字段/选择项目然后：

field.focus();

将光标设置为输入字段

现在我想在这种情况下打开下拉菜单。

有办法吗？

我正在尝试以下感谢来自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')          
        }
    }
    );
}

但它不起作用。编辑：提到的函数selectpicker（'show'）只显示选择项，而不是下拉内容。

感谢。

Answer 1

bootstrap-select只需要在与select元素相同的类中添加一个open类，例如：

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

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

Answer 2

找到一个简单的解决方案here：

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

基本上它会切换open/close状态。因此，不需要refresh。

Answer 3

我假设您正在讨论Bootstrap的this插件。

如果是这样，根据documentation，该插件有一个.show（）方法，该方法以编程方式显示引导选择菜单。

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

Answer 4

您可以使用以下代码。

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

它将单击切换下拉菜单按钮，并将打开下拉菜单。只需将“ selector_id”替换为所需的ID。

如何打开bootstrap-select菜单

4 个答案: