能否通过HTML为Semantic UI的「Multiple Search Selection」下拉框设置多默认值？

完全可以通过修改选项标签的属性来实现，Semantic UI会识别原生HTML的选中标记，不用依赖JavaScript的set selected([value1, value2])方法，具体分两种下拉结构说明：

1. 原生<select>转换的Semantic UI下拉框 #

这种情况直接给目标<option>添加selected属性即可，框架初始化时会自动读取该属性设置默认选中项：

单选示例 #

<select class="ui dropdown" name="gender">
  <option value="">选择性别</option>
  <option value="male">男</option>
  <option value="female" selected>女</option>
  <option value="other">其他</option>
</select>

多选示例 #

给需要默认选中的每个<option>都加上selected属性：

<select class="ui dropdown" multiple name="hobbies">
  <option value="">选择爱好</option>
  <option value="reading" selected>阅读</option>
  <option value="sports" selected>运动</option>
  <option value="music">音乐</option>
</select>

2. Semantic UI自定义结构的下拉框（用<div.item>做选项） #

这种结构不用<option>，而是用带data-value的<div.item>，此时要给目标选项添加data-selected="true"属性：

单选示例 #

<div class="ui dropdown">
  <input type="hidden" name="gender">
  <i class="dropdown icon"></i>
  <div class="default text">选择性别</div>
  <div class="menu">
    <div class="item" data-value="male">男</div>
    <div class="item" data-value="female" data-selected="true">女</div>
    <div class="item" data-value="other">其他</div>
  </div>
</div>

多选示例 #

给需要默认选中的每个<div.item>添加data-selected="true"：

<div class="ui multiple dropdown">
  <input type="hidden" name="hobbies">
  <i class="dropdown icon"></i>
  <div class="default text">选择爱好</div>
  <div class="menu">
    <div class="item" data-value="reading" data-selected="true">阅读</div>
    <div class="item" data-value="sports" data-selected="true">运动</div>
    <div class="item" data-value="music">音乐</div>
  </div>
</div>

最后注意 #

不管用哪种结构，都要在页面加载完成后调用初始化代码，确保框架识别选中属性：

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

内容的提问来源于stack exchange，提问作者Dan Smith