semantic-ui - 语义 UI - 如何将下拉菜单清除为默认值？

Question

我只是在测试语义 UI 并在下拉菜单中遇到问题。我有以下两个下拉列表：

<div class="ui dropdown button btn-outline form-control" id='project1'>
    <span class="text">Project One</span>
    <i tabindex="0" class="dropdown icon float-right">
        <div tabindex="-1" class="menu"></div>
    </i>
    <div tabindex="-1" class="menu transition">
        <div class="item" style="line-height: 1.5rem !important;">
            <span class="title">Service One</span>
            <span class="amount float-right">100</span>
        </div>

        <div class="item" style="line-height: 1.5rem !important;">
            <span class="title">Service Two</span>
            <span class="amount float-right">200</span>
        </div>

        <div class="item" style="line-height: 1.5rem !important;">
            <span class="title">Service Three</span>
            <span class="amount float-right">300</span>
        </div>
    </div>
</div>

和

<div class="ui dropdown button btn-outline form-control" id='project2'>
    <span class="text">Project Two</span>
    <i tabindex="0" class="dropdown icon float-right">
        <div tabindex="-1" class="menu"></div>
    </i>
    <div tabindex="-1" class="menu transition">
        <div class="item" style="line-height: 1.5rem !important;">
            <span class="title">Service One</span>
            <span class="amount float-right">400</span>
        </div>

        <div class="item" style="line-height: 1.5rem !important;">
            <span class="title">Service Two</span>
            <span class="amount float-right">500</span>
        </div>

        <div class="item" style="line-height: 1.5rem !important;">
            <span class="title">Service Three</span>
            <span class="amount float-right">600</span>
        </div>
    </div>
</div>

所以我想要的是：如果从第一个下拉列表中选择了一个选项，第二个下拉列表将自动清除其值并将其设置为Project Two，同样，当从第二个下拉列表中选择一个选项时，第一个下拉列表将自动清除为它的值并将其设置为默认值，即：项目一

由于我是 Semantic UI 的新手，所以我不知道如何处理这种情况！

注意：我正在使用语义 UI - 2.4.2

标签： semantic-ui