jquery 如何通过JavaScript聚焦引导选择元素

vyu0f0g1  于 2023-10-17  发布在  jQuery
关注(0)|答案(5)|浏览(152)

我在Spring中使用Bootstrap Select下拉列表:

<form:select 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>

执行后:

<select class="selectpicker" title="Teilnehmer..." name="participant-picker" data-width="100%" data-live-search="true">
    <option value="1234687">Nachname121, Vorname122 (1234687)</option>
    <option value="1234688">Nachname122, Vorname123 (1234688)</option>
</select>

请记住,Bootstrap会动态地为文件夹和其他东西添加多个div。
现在我想动态地将焦点设置到这个select元素上。这不起作用:

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

olhwl3o21#

问题解决:当使用Boottrap selectpicker时,你必须将焦点设置为选择元素下面的Bootstrap本身生成的按钮元素,而不是选择元素本身。

gzjq41n4

gzjq41n42#

简单地分配一个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()
6kkfgxo0

6kkfgxo03#

你有没有试着加引号?
大概是这样的:

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

我已经遇到了一些麻烦。

yxyvkwin

yxyvkwin4#

不需要引号[name="participant-picker"]
你可能有多个元素名为participant-picker。在这种情况下,只有第一个元素将被建立并将焦点设置在它上面。
为每个元素添加特定的id,名称为participant-picker,例如id="e1",并尝试$('#e1').focus()
如果名称在结尾ex不同,也可以尝试[name^=participant-picker]a1,a2对于此尝试,[name^=a]将找到a1 and a2 ... an
也尝试一些类似的$('[name=participant-picker]').each(function(){$(this).css('background-color','red');});,看看元素选择器$('[name=participant-picker]').找到了

ljsrvy3e

ljsrvy3e5#

我已经尝试了这篇文章中的所有解决方案,但没有一个对我有用。如果您只想让它专注于页面加载,最简单的方法是使用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>

相关问题