Semantic-UI 表单下拉内容

介绍

Semantic-UI 是一个流行的前端框架，提供了许多现代化的UI组件，包括下拉菜单（DropDown）。下拉菜单组件使用户可以从一组选项中选择一个选项。在 Semantic-UI 中，下拉菜单是由一个下拉菜单元素和一个菜单元素组成的。

下拉菜单的内容可以是普通文本，也可以是超链接、标签、图标、图片、按钮等任何HTML元素。下拉菜单可以是单选、多选或搜索框形式。

此外，Semantic-UI 还提供了丰富的定制和配置选项，因此可以轻松地根据需求对下拉菜单进行样式和行为上的定制。

使用方法

基本用法

使用 Semantic-UI 下拉菜单组件的基本方法非常简单。以下代码演示了如何创建一个普通的单选下拉菜单：

<div class="ui selection dropdown">
  <input type="hidden" name="gender">
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu">
    <div class="item" data-value="male">Male</div>
    <div class="item" data-value="female">Female</div>
  </div>
</div>

解释：

1. div元素被赋予ui和selection两个类别。
2. input元素是隐藏的，用于保存选择的值。name属性定义用于提交的表单项的名称。
3. i元素包含了相应文本和图标。
4. div元素是实际的菜单项，每个菜单项都包含了 item 类别 和一个属性data-value，用于保存与该选项关联的值。

如果你的项目中，Semantic-UI已经被引入，只需加上相应的样式和JavaScript（如：jquery.min.js 和 semantic.min.js）即可。

配置选项

Semantic-UI 下拉菜单提供了很多可选的配置选项，使用户可以根据自己的需求进行定制。以下是一些常用的配置选项：

• allowAdditions：布尔值，允许用户添加新项目到下拉列表中。
• allowCategorySelection：布尔值，允许用户选择分类标题作为选项。
• allowReselection：布尔值，允许用户重新选择之前已经选择的选项。
• fullTextSearch：布尔值，启用全文搜索，让用户可以搜索下拉列表中的选项。
• placeholder：字符串，定义默认的占位符文本。
• onChange：函数，当下拉列表的值改变时执行。

以下是如何配置使用上述选项的示例：

$('.ui.dropdown').dropdown({
  allowAdditions: true,
  allowCategorySelection: false,
  allowReselection: true,
  fullTextSearch: true,
  placeholder: 'Select Country',
  onChange: function(value, text, selectedItem) {
    console.log(value);
  }
});

多选下拉菜单

如果需要允许用户选择多个选项，可以使用 multiple 类别：

<div class="ui multiple selection dropdown">
  <input type="hidden" name="skills">
  <i class="dropdown icon"></i>
  <span class="default text">Skills</span>
  <div class="menu">
    <div class="item" data-value="html">HTML</div>
    <div class="item" data-value="css">CSS</div>
    <div class="item" data-value="javascript">JavaScript</div>
    <div class="item" data-value="jquery">jQuery</div>
    <div class="item" data-value="react">React</div>
    <div class="item" data-value="node">Node.js</div>
    <div class="item" data-value="mysql">MySQL</div>
    <div class="item" data-value="mongodb">MongoDB</div>
  </div>
</div>

与单选下拉菜单相比，上面的代码只是添加了一个 multiple 类别。在提交表单时，将选择的值作为数组传递。

搜索下拉菜单

如果列表项很长，用户可以使用搜索框来快速查找所需的选项。以下是如何配置 Semantic-UI 搜索下拉菜单的示例：

<div class="ui search selection dropdown">
  <input type="hidden" name="country">
  <i class="dropdown icon"></i>
  <span class="default text">Select Country</span>
  <div class="menu">
    <div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
    <div class="item" data-value="ax"><i class="ax flag"></i>Åland Islands</div>
    <div class="item" data-value="al"><i class="al flag"></i>Albania</div>
    <div class="item" data-value="dz"><i class="dz flag"></i>Algeria</div>
    ... // 省略一部分代码
  </div>
</div>

这里只是添加了一个 search 类别。

无标记下拉菜单

以下是如何创建一个没有按钮和标记的下拉菜单：

<div class="ui icon fluid floating dropdown button">
  <i class="dropdown icon"></i>
  <span class="text">Menu</span>
  <div class="menu">
    <div class="item">
      <i class="home icon"></i>
      Home
    </div>
    <div class="item">
      <i class="book icon"></i>
      Library
    </div>
    <div class="item">
      <i class="computer icon"></i>
      Applications
    </div>
    <div class="divider"></div>
    <div class="item">
      <i class="sign out icon"></i>
      Logout
    </div>
  </div>
</div>

这里添加了一个 icon 类别，用于去除按钮边框。并使用 fluid 类别填充了整个容器，以实现全宽。

总结

以上是Semantic-UI 表单下拉内容的介绍。在实际开发中，根据需求不同，您可以采用不同的配置选项和样式，以创建满足需求的下拉菜单。必要时可以参考 Semantic-UI 的文档，以便更好地理解和使用此组件。