我正在构建一个系统，该系统需要在同一屏幕上有两个下拉列表，实际上一个在另一个下。
下面是我的代码的精确表示。
<div class="field">
<label>Operational Category</label>
<div class="ui selection dropdown">
<input type="hidden" class="ui hidden timeType" name="time_type" value="10" />
<i class="simple dropdown icon"></i>
<div class="menu">
<% for (let thisTimeType of timeTypes) { %>
<div data-value="<%= thisTimeType.getId() %>"><%= thisTimeType.getName() %></div>
<% } %>
</div>
</div>
</div>
<div class="field">
<label>Task Category</label>
<div class="ui selection dropdown">
<input type="hidden" class="ui hidden category" name="card_category_id" value="<%= card_category_id %>" />
<i class="simple dropdown icon"></i>
<div class="default text">(no category)</div>
<div class="menu">
<% for (let thisCardCategory of cardCategories) { %>
<% let isActive = (thisCardCategory.getId() == card_category_id) ? 'active item' : 'item' %>
<div class="<%= isActive %>" data-value="<%= thisCardCategory.getId() %>"><%= thisCardCategory.getName() %></div>
<% } %>
</div>
</div>
</div>
文件底部是
jQuery('.ui.dropdown').dropdown();
其中一个下拉菜单(具有讽刺意味的是，第二个(有效，而另一个则无效，我不知道为什么。我尝试过的事情：
- 给第一个一个"默认文本">
- 删除第二个以查看第一个是否有效
- 使用"简单"类来查看它是否构造正常。它悬停并显示选项，尽管它看起来很垃圾。
有什么想法吗？因为我对此感到非常困惑。我错过了一些超级明显的东西吗？
答：根据IronGeek的评论，答案非常简单：
我在第一个下拉列表中缺少itemcss 类名称(class="item"(。
例如：<div class="item" data-value="<%= thisTimeType.getId() %>"><%= thisTimeType.getName() %></div>