我有一个具有多个文本输入和一些select2元素的表单。
使用键盘在字段之间进行标签工作正常 – Select2元素的行为就像一个表单元素,并在制表时接收焦点。
我想知道是否可以在Select2元素获得焦点时打开下拉菜单。
使用键盘在字段之间进行标签工作正常 – Select2元素的行为就像一个表单元素,并在制表时接收焦点。
我想知道是否可以在Select2元素获得焦点时打开下拉菜单。
这是我迄今为止所尝试过的
$("#myid").select2().on('select2-focus',function(){
$(this).select2('open');
});
但使用此代码后,下拉菜单将在选择后再次打开。
解决方法
选择之后可能会触发select2焦点事件。
我找到的唯一方法是select2-focus和select2-blur事件和jQuery one事件处理程序的组合。
因此,元素第一次获得焦点时,select2将被打开一次(因为一个),当元素模糊时,一个事件处理程序再次被附加,等等。
码:
$('#test').select2({
data: [{
id: 0,text: "enhancement"
},{
id: 1,text: "bug"
},{
id: 2,text: "duplicate"
},{
id: 3,text: "invalid"
},{
id: 4,text: "wontfix"
}],width: "300px"
}).one('select2-focus',select2Focus).on("select2-blur",function () {
$(this).one('select2-focus',select2Focus)
})
function select2Focus() {
$(this).select2('open');
}
演示:http://jsfiddle.net/IrvinDominin/fnjNb/
UPDATE
要让鼠标单击工作,您必须检查触发处理程序的事件,只有事件为焦点,才能触发打开的方法
码:
function select2Focus() {
if (/^focus/.test(event.type)) {
$(this).select2('open');
}
}
演示:http://jsfiddle.net/IrvinDominin/fnjNb/4/
更新为SELECT2 V 4.0
select2 v 4.0已更改其API,并删除了自定义事件(请参阅https://github.com/select2/select2/issues/1908)。所以有必要改变检测方法。
码:
$('.js-select').select2({
placeholder: "Select",width: "100%"
})
$('.js-select').next('.select2').find('.select2-selection').one('focus',select2Focus).on('blur',function () {
$(this).one('focus',select2Focus)
})
function select2Focus() {
$(this).closest('.select2').prev('select').select2('open');
}
演示:http://jsfiddle.net/IrvinDominin/xfmgte70/