Javascript 语义用户界面下拉列表“；“类”；应用于父对象

我在多重搜索选项（）下有第二个“下拉列表”

所以，我把所有的东西都放好了，我从Fomantic UI的CDN中得到了代码，并设置了我的下拉列表。但是，当我单击下拉列表时，它不会将“open”类应用于

.ui.dropdown

元素，而是将其应用于其父元素

这是我的代码，下面是单击元素后的结果：

<div class="form-group">
    <label>Passport Country</label><br />
    <div class="ui fluid multiple search selection dropdown">
        <input type="hidden" name="passport_country" value="">
        <i class="dropdown icon"></i>
        <div class="default text">Passport Country</div>
        <div id="passport_country" class="menu">
            <div class="item" data-value="AF">Afghanistan</div>
            <div class="item" data-value="AL">Albania</div>
            <div class="item" data-value="DZ">Algeria</div>            
        </div>
    </div>
</div>

护照所在国

护照国家
阿富汗
阿尔巴尼亚
阿尔及利亚

在单击时，它是完全相同的，但它会将一个类“open”添加到第一个div（带有

.formgroup

的div）

我不知道为什么它不工作…类（也应该是不同的）没有应用到适当的元素