按下选项卡时如何在焦点上打开 select2 下拉菜单
Posted
技术标签:
【中文标题】按下选项卡时如何在焦点上打开 select2 下拉菜单【英文标题】:How to open select2 dropdown on focus when tab pressed 【发布时间】:2021-06-23 23:20:11 【问题描述】:我希望当它以选项卡为焦点时自动打开选择框。我使用 select2 插件。
这里是html代码示例:
<div class="col-md-4">
<div class="form-group">
<label for="type" class="text-muted">Transaction type</label>
<span class="ml-1 text-danger">*</span>
<select name="type" id="type" class="form-control select=search transaction_type" required data-fouc>
<option value="credit" selected>Credit</option>
<option value="debit">Debit</option>
</select>
@error('type')
<span class="invalid-feedback" role="alert">
<strong> $message </strong>
</span>
@enderror
</div>
</div>
其他下拉菜单是这样的:
<div class="col-md-4">
<div class="form-group">
<label for="bank_id" class="text-muted">Related bank</label>
<span class="ml-1 text-danger">*</span>
<select name="bank_id" data-select2-id="bank_id" id="bank_id" class="form-control select select2-hidden-accessible bank">
@foreach($banks as $bank)
<option value="$bank->id">$bank->name</option>
@endforeach
</select>
@error('bank_id')
<span class="invalid-feedback" role="alert">
<strong> $message </strong>
</span>
@enderror
</div>
</div>
【问题讨论】:
【参考方案1】:你必须玩event focus
,但为了避免无限聚焦,你也必须陷进去event closing
$(".form-control.select-search").select2();
$(document).on('focus', '.select2-selection.select2-selection--single', function (e)
$(this).closest(".select2-container").siblings('select:enabled').select2('open');
)
$(".form-control.select-search").on('select2:closing', function (e)
$(e.target).data("select2").$selection.one('focus focusin', function (e)
e.stopPropagation();
);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.css" rel="stylesheet"/>
<div class="form-group">
<select class="form-control select-search" data-fouc>
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
</select>
</div>
【讨论】:
非常感谢您的回答。我知道这段代码是正确的,但我不知道为什么这段代码在我的应用程序中不起作用。我将粘贴上面的确切代码,如果你看一下,看看有什么问题?谢谢 你又遇到问题了? 不,我的项目中存在 jQuery 问题。我解决了那个。谢谢。以上是关于按下选项卡时如何在焦点上打开 select2 下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章
关闭选项卡以关注上一个选项卡而不是第一个选项卡时如何更改 dojo 内容选项卡焦点?