Thymeleaf 表单选择带有选项卡索引的选项下拉列表答案

【问题标题】：Thymeleaf form select option dropdown with tab indexThymeleaf 表单选择带有选项卡索引的选项下拉列表
【发布时间】：2018-09-24 18:37:58
【问题描述】：

我正在使用 thymeleaf 创建一个下拉列表，如下所示：

<select id="userLevel" class="form-control" required>
    <option th:each="level : ${levels}" th:text="${level.description}" th:value="${level.id}">
</select>

添加thymeleaf生成的HTML如下：

<select id="userLevel" class="form-control" required="">
    <option value="0">Level 1</option>
    <option value="1">Level 2</option>
    <option value="2">Level 3</option>
    <option value="3">Level 4</option>
</select>

<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected" aria-expanded="false">
    <span class="multiselect-selected-text">None selected</span> 
    <b class="caret"></b>
  </button>
  <ul class="multiselect-container dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(1px, 33px, 0px); top: 0px; left: 0px; will-change: transform;">
    <li><a tabindex="0"><label class="radio" title="Level 1"><input type="radio" value="0"> Level 1</label></a></li>
    <li><a tabindex="0"><label class="radio" title="Level 2"><input type="radio" value="1"> Level 2</label></a></li>
    <li><a tabindex="0"><label class="radio" title="Level 3"><input type="radio" value="2"> Level 3</label></a></li>
    <li><a tabindex="0"><label class="radio" title="Level 4"><input type="radio" value="3"> Level 4</label></a></li>
  </ul>
</div>

我遇到的问题是 tab 键的行为不符合预期。我希望能够按一次 Tab 以循环浏览表单中的每个元素，但我按一次 Tab 键，“选择”被聚焦，然后再次聚焦“按钮”。

我已经尝试添加：

tabindex="-1"

添加到选择元素，然后将其附加到“选择”和“按钮”，结果是：

<select id="userLevel" class="form-control" required="" tabindex="-1">
    ...
</select>

<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected" aria-expanded="false" tabindex="-1">
    <span class="multiselect-selected-text">None selected</span> 
    <b class="caret"></b>
  </button>
  ...
</div>

然后tab键完全跳过元素。我希望在按下 tab 键而不是 select 时选择一次“按钮”，因为按钮格式正确并且在获得焦点时突出显示。

任何帮助将不胜感激。

【问题讨论】：

btn-group div 及其内容是如何生成的？它是由某些插件生成的吗？
我认为这是由 Thymeleaf 生成的——虽然它不是我的代码，所以我不确定。你问我的事实让我觉得不是。
Thymeleaf 仅在第一个代码片段中使用，用于循环 levels 并生成选项。之后必须有额外的代码来生成btn-group，如果没有 html 立即在下面，它可能会在 select 之后由一个 fauly 功能生成并附加，该功能应该增强下拉菜单的样式，但这样做会生成一个按钮与原始选择具有相同的 tabindex。试着找出这个特征，看看它会导致什么。
非常感谢您的建议。我认为这纯粹是 Thymeleaf 的一个功能。我看过pom，但没有明显的插件。我会继续寻找，但至少我更接近于知道我现在在寻找什么。
您好，感谢您的帮助。在知道我在寻找什么之后，我找到了罪魁祸首，插件“bootstrap-multiselect.js”是添加 div 的插件。我已删除该插件，它现在按预期工作。我将为遇到相同问题的其他人添加答案。

标签： javascript html thymeleaf

【解决方案1】：

感谢@Alexandru，我发现了这个问题。

我还使用了生成 div 元素的插件“bootstrap-multiselect.js”，以及生成 select 元素的 Thymeleaf。

我删除了插件，现在一切都按预期工作 - 只是生成了选择和选项，并且选项卡按钮按预期运行。

【讨论】：