我有一个具有多个文本输入和一些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'); }