Semantic-UI 下拉选择类型

介绍

Semantic-UI 是一个流行的 CSS 框架，通过提供一组基本的 UI 元素和交互，为 Web 开发带来了更快、更简便的方式。

下拉选择类型是 Semantic-UI 中常用的 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>

jQuery

$('.ui.dropdown').dropdown();

配置选项

下拉选择类型支持多种配置选项，例如：

• allowAdditions: 是否允许添加新的选项
• maxSelections: 最多可选多少个选项
• placeholder: 未选择任何选项时的提示文本
• values: 默认选中的选项

例如：

<div class="ui fluid search selection dropdown" id="select-countries" multiple>
  <input type="hidden" name="countries">
  <i class="dropdown icon"></i>
  <div class="default text">Select Countries</div>
  <div class="menu">
    <div class="item" data-value="us">United States</div>
    <div class="item" data-value="cn">China</div>
    <div class="item" data-value="ca">Canada</div>
    <div class="item" data-value="fr">France</div>
    <div class="item" data-value="jp">Japan</div>
  </div>
</div>

$('#select-countries').dropdown({
  allowAdditions: true,
  maxSelections: 3,
  placeholder: 'Select up to 3 countries',
  values: ['us', 'cn']
});

总结

Semantic-UI 下拉选择类型是 Web 开发中常用的 UI 组件，可以方便地展示和选择多个选项。在使用时，需要调整一些配置选项以满足应用场景。