2

我连续有多个下拉菜单，我想允许用户使用制表键从一个字段移动到另一个字段。

下拉菜单与文本匹配，允许全文搜索并且可以清除。

选项卡确实有效，但不幸的是，当通过下拉列表进行选项卡时，第一个值会自动选择：

在此处输入图像描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Semantic UI: tabbing through select boxes</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
  </head>
  <body>
    <form>
      <select class="ui search dropdown">
        <option value="">choose one</option>
        <option value="1">abc</option>
        <option value="2">bcd</option>
        <option value="3">cde</option>
      </select>
      <select class="ui search dropdown">
        <option value="">choose one</option>
        <option value="1">ababa</option>
        <option value="2">cdcdcd</option>
        <option value="3">efefef</option>
      </select>
      <select class="ui search dropdown">
        <option value="">choose one</option>
        <option value="1">ababa</option>
        <option value="2">cdcdcd</option>
        <option value="3">efefef</option>
      </select>
    </form>
    <script>
      window.onload = () => {
        $('form .ui.dropdown').dropdown({
          match: 'text',
          clearable: true
        });
      }
    </script>
  </body>
</html>

我已经尝试了 Semantic UI 和 Fomantic UI 的多种设置组合，但我找不到任何允许搜索下拉菜单的设置。

通过查看不同的选项，action我可以得到一个非常有希望的选项，但是当只有一个选项（左）时，无法做出选择。

有没有人知道允许用户在不选择第一个选项的情况下通过下拉列表进行选项卡的配置？使用 Semantic-UI 还是 Fomantic-UI？

4

1 回答 1

0

这个 Fomantic-UI 问题让我走上了正确的道路：

[下拉] 搜索选择关闭时选择第一个项目

解决方案是设置forceSelection为false：

        $('form .ui.dropdown').dropdown({
          match: 'text',
          clearable: true,
          forceSelection: false
        });
于 2021-05-19T05:04:11.530 回答