select2强调页面加载

我正在尝试使一个select2框在页面加载时出现在其聚焦状态。 我已经尝试了以下内容:

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

只有第一行似乎有任何效果,它会确定select2字段的焦点,但是它需要额外的按键来显示search字段,并允许inputsearchstring。

因此,如果你加载页面并开始键入:“search”,“S”将打开search框,然后其余的键将被input到它,所以你会search“earch”

根据select2文档:

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

应该是所有你需要的。

在文档的程序访问部分下find。

这在版本3.4.2中起作用。 不知道什么时候它被完全实现。

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

Select2创build自己的input,所以尝试这样的事情:

 $(window).load(function(){ $('#id').prev('.select2-container').find('.select2-input').focus(); }); 

如果你使用:

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

select2被打开,你可以直接键入search。

如果你使用:

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

焦点被设置为创build的select2下拉列表。 如果在键盘上按下EnterCtrl + Arrow down ,可以将其打开。

个人认为这比:

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

因为你不能用键盘真的打开select2下拉列表。

这对我来说是有效的,它也将闪烁的光标放在input栏中。 订单很重要!

 $('#s2id').select2('focus'); $('#s2id').select2('open'); 

我试了其他2个答案,但没有太多的运气,也许是因为我通过JSON填充控件,并在一开始它只是一个隐藏的input,所以程序化的开放方法没有任何影响。

不过,下面对我来说就好了:

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

如果由于某种原因,您没有相同的ID出现在您的设置中,然后查找附加了select2-focusser类的控件。

我们有一个文本框为select2,并使用下面的代码片段来激活和聚焦文本input中的光标。 所有其他选项并不适用于我们,因为它们只是打开select2选项,但没有产生预期的行为。

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

在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(); 

Dan-Nolan已经很好地回答了,但是对于那些对于Select2来说是新手的人来说,有一点需要注意:在调用它的函数之前,html对象需要用select2初始化:

所以最终的代码应该是

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

在Select2 4.0.2我有一个问题与select2('焦点')。 列表看起来像集中,但是当我按ENTER键不打开。
对我来说就是解决scheme。

 $('#id').select2(); $('.select2-selection', $('#id').next()).focus(); or $('#id').next().find('.select2-selection').focus(); 

根据select2文档:

 $('document').ready(function(){ var opencustomer = $("#changedatachange").select2(); opencustomer.select2("open"); }); 

使用此后缀:

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