Question

我正在构建一个系统，需要在同一个屏幕上显示两个下拉列表，实际上是一个在另一个屏幕上。

以下是我的代码的精确表示。

<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();

其中一个下拉列表（具有讽刺意味的是，第二个下拉列表）起作用而另一个下拉列表不起作用，我无法弄清楚原因。我尝试过的事情：

为第一个提供默认文字＆＃39;
删除第二个以查看第一个是否有效
使用＆＃39; simple＆＃39;上课，看它是否构造好。它徘徊并显示选项，虽然它看起来很垃圾。

有什么想法？因为我对此深感困惑。我错过了一些非常明显的东西吗？

Answer 1

答案：根据IronGeek的评论，答案非常简单：

我在第一个下拉列表中缺少item css className（class =＆＃34; item＆＃34;）。

例如：<div class="item" data-value="<%= thisTimeType.getId() %>"><%= thisTimeType.getName() %></div>

语义UI两个几乎完全相同的下拉菜单 - 一个工作，一个不工作

1 个答案: