Question

我正在使用＆＃39; Semantic UI＆＃39;来创建html表单。框架。虽然我使用普通选择项作为下拉/选择列表，但我使用语义UI设置样式。一切正常，但是一旦我从下拉列表中选择一个值，我就无法取消选择/值作为最终用户。

假设在此FIDDLE中，如果我选择“男性”，并再次想要取消选择该选项并显示占位符/默认文字＆＃39;性别＆＃39;，我＆＃39;我无法做到。有人可以帮我找出一种方法，使选择工作作为常规的HTML选择项而不是下拉列表吗？

HTML代码

<div class="field">
            <label style="width: 250px">Select a Gender</label> <select
                name="skills" class="ui fluid dropdown">
                <option value="">Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
</div>

JavaScript代码

$(".ui.fluid.dropdown").dropdown({})

Answer 1

试试这个：

$('select.dropdown').dropdown({placeholder:'Your placeholder'});

有关详细信息，请参阅Semantic UI（或中文版Semantic UI CN）。

Answer 2

在经典HTML <select>元素中，它将空值<option value="">Gender</option>视为另一个下拉菜单项。

但是，Semantic UI使用空值<option>作为占位符文本。如果您希望 Gender 作为可选项，那么它应该是另一个独立于占位符文本的项目。

如果你想要清除选择的能力，我认为有更好的UX范例来处理这个问题。例如，您可以使用外部清除选择按钮调用：

$('.ui.fluid.dropdown').dropdown('clear')

另一个更简化的选项可能是使用多选下拉列表，并限制maxSelections = 1，examples page中的第一个示例。这样，用户就会得到他们已选择内容的印象，并清除他们在同一下拉容器中使用元素的选择。

Answer 3

您应该知道，语义界面中的.dropdown()默认会从select中删除任何空值。

尽管如此，还是有一些方法可以满足您的需求。

检查this fiddle。

Answer 4

$('.ui.dropdown').dropdown({
  clearable: true
});

Answer 5

您可以使用下面的代码段来实现。

 <div class="ui selection dropdown">
    <input name="gender" type="hidden" value="default">
    <i class="dropdown icon"></i>
    <div class="text">Default Value</div>
    <div class="menu">
        <div class="item" data-value="default">Default Value</div>
        <div class="item" data-value="0">Value</div>
        <div class="item" data-value="1">Another Value</div>
    </div>
 </div>

您可以在这里https://semantic-ui.com/modules/dropdown.html#/examples看看。您也可以使用“可清除”。

如果您想将此值传递给后端，请记住，所选值在输入中。

语义UI：下拉默认/占位符值问题

5 个答案: