如何通过 JavaScript 聚焦 bootstrap-select 元素

Answer 1

问题已解决：使用 Bootrap selectpicker 时，必须将焦点设置到 select 元素下方由 Bootstrap 本身生成的按钮元素，而不是 select 元素本身。

Answer 2

只需分配一个 id 并使用该 id 作为焦点即可

<form:select id="one" name="participant-picker" multiple="false" path="participants" cssClass="selectpicker" data-live-search="true" title="Teilnehmer..." data-width="100%">
<form:options
    items="${participants}"
    itemValue="enrolmentNumber"
    itemLabel="description" />
</form:select>

然后使用

$('#one').focus()

Answer 3

您是否尝试添加引号？

类似这样的事情：

$('select[name="participant-picker"]').focus()

我已经遇到了一些麻烦。

Answer 4

无需引号

[name="participant-picker"]

。

可能您有多个名为

participant-picker

的元素。？ 在这种情况下，只会创建第一个元素并将焦点放在它上面。

为每个元素添加特定的 id 和名称

participant-picker

例如

id="e1"

并尝试

$('#e1').focus()

如果名称末尾不同，也请尝试

[name^=participant-picker]

，例如：

a1,a2

，这次尝试

[name^=a]

将找到

a1 and a2 ... an

。

也可以尝试一些这样的

$('[name=participant-picker]').each(function(){$(this).css('background-color','red');});

查看元素选择器

$('[name=participant-picker]').

已找到

Answer 5

我已经尝试了这篇文章中的所有解决方案，但没有一个对我来说适用于引导程序。如果您只想让它专注于页面加载，最简单的方法是使用

autofocus

在这种情况下，它看起来像这样：

<form:select name="participant-picker" multiple="false" path="participants" cssClass="selectpicker" data-live-search="true" title="Teilnehmer..." data-width="100%" autofocus>
    <form:options
        items="${participants}"
        itemValue="enrolmentNumber"
        itemLabel="description" />
</form:select>