jquery – 选择2打开下拉列表焦点

前端之家收集整理的这篇文章主要介绍了jquery – 选择2打开下拉列表焦点前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个具有多个文本输入和一些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/

原文链接:https://www.f2er.com/jquery/181761.html

猜你在找的jQuery相关文章