Semantic UI选择下拉框无法设置默认选中项，求解决方案

云上老周

2026-8-4

解决Semantic UI下拉框默认选中失效的问题

问题根源

你的代码存在两个关键问题：

Semantic UI下拉框不使用标准HTML的selected属性标记选中项，而是依赖active selected类
缺少用于显示选中文本的<div class="default text">元素，导致初始化后无视觉反馈

修正后的完整代码

HTML部分

<form class="ui form" method="post">
   <div class="ui fluid selection dropdown">
       <input type="hidden" name="language" value="en">
       <i class="dropdown icon"></i>
       <!-- 新增默认文本显示容器 -->
       <div class="default text">English</div>
       <div class="menu">
            <!-- 用active selected类替代selected属性 -->
            <div class="item active selected" data-value="en"><i class="gb flag"></i>English</div>
            <div class="item" data-value="de"><i class="de flag"></i> German</div>
            <div class="item" data-value="fr"><i class="fr flag"></i> French</div>
            <div class="item" data-value="es"><i class="es flag"></i> Spanish</div>
            <div class="item" data-value="it"><i class="it flag"></i> Italian</div>
            <div class="item" data-value="pt"><i class="pt flag"></i> Portugese</div>
        </div>
  </div>
</form>

JS部分

只需初始化下拉框即可，HTML中的标记会自动生效：

$(document).ready(function(){
   $('.ui.fluid.selection.dropdown').dropdown();
});

可选：用JS动态设置默认值

如果需要通过JS动态指定选中值，确保在初始化后调用方法：

$(document).ready(function(){
   const $dropdown = $('.ui.fluid.selection.dropdown');
   $dropdown.dropdown();
   $dropdown.dropdown('set selected', 'en');
});