Semantic-UI Dropdown 简单类型

简介

Semantic-UI是一套基于语义化的UI框架，其中包括Dropdown组件。Dropdown组件可以让用户从预定义的选项中选择一个值。该组件支持多种类型和操作，本文将介绍其中的简单类型。

简单类型的下拉菜单是最常用和最基础的菜单类型。该菜单中的每个选项都由文本和一个对应的值组成。用户可从下拉菜单中选择一个选项，该选项的值将被提交给服务器或用于其他操作。一般情况下，简单菜单是通过<select>和<option>来实现的。

代码示例

以下是一个使用Semantic-UI实现简单类型下拉菜单的代码示例：

<!-- HTML 代码 -->
<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>

<!-- JS 代码 -->
<script>
  $('.ui.dropdown')
    .dropdown({
      onChange: function(value) {
        $('input[name="gender"]').val(value);
      }
    });
</script>

这段代码会生成一个简单的下拉菜单，其中包含两个选项：Male和Female。当用户选择一个选项时，下拉菜单将显示选项的文本。同时，下拉菜单的输入框中将显示选项的值。当表单提交时，选中的值将被提交给名为gender的隐藏输入框。

结语

简单类型的下拉菜单是使用Semantic-UI中Dropdown组件最基础的类型之一。通过上述代码示例，我们可以了解该下拉菜单如何生成以及如何获取选中的值。如需使用其他类型的下拉菜单，请参考Dropdown组件的文档。