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

Question

我正在使用' Semantic UI '框架创建一个html表单.当我使用正常的选择项目作为下拉/选择列表时,我正在使用语义UI来设置样式.一切正常,但是一旦我从下拉列表中选择一个值,我就无法取消选择最终用户的选项/值.

假设在这个FIDDLE中,如果我选择"男性",并再次想要取消选择该选项并显示占位符/默认文本"性别",我无法做到.有人可以帮我找出一种方法,使选择工作作为常规的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'});

有关详细信息,请参阅语义UI(或中文版的语义UI CN).

Answer 2

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

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

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

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

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