选择后保持焦点 Select2

Posted 2023-05-07

【中文标题】选择后保持焦点 Select2

【英文标题】：Keep focus after selection is made Select2

【发布时间】：2017-07-19 19:18:48

【问题描述】：

在进行选择后，我遇到了 Select2 保持焦点的问题。我的应用程序中有一些很长的表格需要通过标签进行浏览。现在，一旦使用 Select2 进行选择，焦点就会丢失，因此无法切换到下一个字段。

您可以在他们的示例页面上对此进行测试。标准选择字段允许在选择后进行制表符，Select2 字段现在可以。

编辑：我使用 Select2 的区域示例。

html：

<div class="form-group">
    @Html.LabelFor(m => m.Addresses[i].City)
    @Html.TextBoxFor(m => m.Addresses[i].City, new  @class = "form-control jsAddressCity" )
    @Html.ValidationMessageFor(m => m.Addresses[i].City)
</div>

<div class="form-group">
    @Html.LabelFor(m => m.Addresses[i].StateId)
    @Html.DropDownListFor(m => m.Addresses[i].StateId, new SelectList(Model.StatesList, "Id", "Code", Model.Addresses[i].StateId), "Select State", new  @class = "form-control jsAddressStateId jsSelect2" )
    @Html.ValidationMessageFor(m => m.Addresses[i].StateId)
</div>

<div class="form-group">
    @Html.LabelFor(m => m.Addresses[i].Zip)
    @Html.TextBoxFor(m => m.Addresses[i].Zip, new  @class = "form-control jsAddressZip" )
    @Html.ValidationMessageFor(m => m.Addresses[i].Zip)
</div>

JS：

        $(".jsSelect2").select2(
            width: "100%",
            theme: 'bootstrap'
        );

【问题讨论】：

jsfiddle.net/fyhsz9ra/1183 我做了一个小提琴，我无法弄清楚你的问题。能否请您提供详细信息

嗯，不知道我的情况如何。在您的示例中，它工作正常。如果您使用 tab 或 select 选择一个项目，您的 Select2 将关闭但保持焦点，允许您通过 tab 进入下一个控件。在我的情况下，当您进行选择时，Select2 会关闭，但焦点不再位于控件上。没有焦点，因此您无法查看下一步。我有 Select2 的最新更新，除了使用 Bootstrap 主题之外，我不相信我在做任何不同的事情。无论有没有这个主题，它都会做同样的事情。

请提供您的html

编辑了我的帖子，并附上了一个简短的使用示例。

您能验证一下您使用的是哪个版本的 select2

【参考方案1】：

我有同样的问题。这是4.0.3版本的bug，请改用select2 4.0.2

【讨论】：

我转而使用 4.0.2，但仍然遇到了这个问题。但是那里的链接中的解决方法为我修复了它。感谢您的帮助。

我们从 4.0.5 回到 4.0.2，这为我们解决了这个问题。谢谢。

【参考方案2】：

为了在选择一个选项后保持 select2 的焦点和打开状态，我们只需要在加载它时提供一个额外的参数。

$(".jsSelect2").select2(
        width: "100%",
        theme: 'bootstrap',
        closeOnSelect: false
    );

希望这对将来的某人有所帮助。