69

我试图让一个 select2 框在页面加载时以其聚焦状态出现。我尝试了以下方法：

$('#id').select2('focus');
$('#id').trigger('click');
$('#id').trigger('focus');

只有第一行似乎有任何效果，它确实聚焦 select2 字段，但是它需要额外的按键来显示搜索字段，并允许输入搜索字符串。

因此，如果您加载页面并开始输入：“搜索”，“S”将打开搜索框，然后将其余键输入其中，因此您将搜索“arch”

4

13 回答 13

149

根据 Select2 文档：

$('#id').select2('open');

应该是你所需要的。

在文档的Programmatic Access部分下找到。

于 2013-05-20T00:56:46.380 回答
36

这适用于版本 3.4.2。不确定何时准确实施。

$('#id').select2('focus');
于 2013-09-16T17:39:32.847 回答
12

如果您使用：

$('#id').select2('open');

select2被打开，你可以直接键入进行搜索。

如果您使用：

$('#id').select2('open').select2('close');

焦点设置为创建的 select2 下拉列表。如果您敲击Enter或Ctrl + Arrow down敲击键盘，您可以打开它。

个人认为这比：

$('#id').select2('focus');

因为您无法真正使用键盘打开 select2 下拉列表。

于 2016-01-15T09:43:44.353 回答
9

Select2 创建自己的输入，因此请尝试以下操作：

$(window).load(function(){
  $('#id').prev('.select2-container').find('.select2-input').focus();
});
于 2013-05-20T00:55:28.733 回答
3

这对我有用，它还将闪烁的光标放在输入字段中。订单很重要！

$('#s2id').select2('focus');
$('#s2id').select2('open');
于 2016-06-03T02:29:44.823 回答
1

如https://forums.select2.org/t/search-being-unfocused/1203/10中所述，目前在 Select2 4.x 和 JQuery 3.6.0 的组合中焦点被打破

两个修复：降级到 JQuery 3.5.1 或

// hack to fix jquery 3.6 focus security patch that bugs auto search in select-2
$(document).on('select2:open', () => {
    document.querySelector('.select2-search__field').focus();
});
于 2021-11-14T05:51:08.877 回答
1

在 Select2 4.0.2 上，我遇到了 select2('focus') 的问题。列表看起来很集中，但是当我按 ENTER 时，列表没有打开。
对我来说，这就是解决方案。

$('#id').select2();
$('.select2-selection', $('#id').next()).focus();
or
$('#id').next().find('.select2-selection').focus();
于 2016-06-08T10:20:03.870 回答
0

我尝试了其他 2 个答案，但运气不佳，可能是因为我通过 json 填充了控件，而一开始它只是一个隐藏的输入，因此编程打开方法没有任何效果。

但是，以下内容对我来说很好： 

$(document).ready(function() 
{     
    $('#s2id_autogen1').focus();
});

如果由于某种原因，您的设置中没有出现相同的 id，则查找附加了select2-focusser类的控件。

于 2013-08-12T19:40:42.240 回答
0

我们有一个作为 select2 的文本字段，并使用以下代码段来激活光标并将光标聚焦在文本输入中。所有其他选项都对我们不起作用，因为它们只打开了 select2 选项，但没有产生预期的行为。

$('#s2id_autogen1').click()
$('#s2id_autogen1').focus()

于 2014-11-21T12:07:22.600 回答
0

根据 select2 文档：

$('document').ready(function(){
   var opencustomer = $("#changedatachange").select2();
   opencustomer.select2("open");
});
于 2017-08-18T06:57:21.870 回答
0

在 Select2 4.0 上，方法 .select2('focus') 什么都不做。但是，我的解决方法是简单地获取具有“aria-labelledby”属性的“span”元素（注意该值是基于 id 的，所以它有点独特），并关注它：

var $field = $('select');
$field.select2();
var id = $field.attr('id');
var $spanLabel = $field.next().find("span[aria-labelledby='select2-" + id + "-container']");
$spanLabel.focus();
于 2015-09-28T14:23:56.643 回答
0

Dan-Nolan 已经很好地回答了，但对于那些不熟悉 Select2 的人来说，需要注意一点：在调用其函数之前，需要使用 select2 初始化 html 对象：

所以最终的代码应该是

$('#id').select2();

$('#id').select2('open');
于 2016-05-18T04:03:14.597 回答
-3

使用这个序列：

$('#id').select2('open');
$('#id').select2('close');
于 2015-05-14T19:42:12.860 回答