javascript 语义 UI：下拉默认值/占位符值问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32381571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Semantic UI: Dropdown default/placeholder value issue
提问by Phanikanth
I'm working on creating a html form using 'Semantic UI' framework. While I'm using a normal select item for a dropdown/select list, I'm styling it using Semantic UI. Everything works fine, but once I select a value from the dropdown, I can't deselect the option/value as an end user.
我正在使用“语义 UI”框架创建 html 表单。当我为下拉/选择列表使用普通选择项时，我使用语义 UI 对其进行样式设置。一切正常，但是一旦我从下拉列表中选择了一个值，我就无法作为最终用户取消选择该选项/值。
Suppose in this FIDDLE, if I select 'male', and again want to de-select the option and show the placeholder/default text 'Gender', I'm not able to. Can someone help me figure out a way to make the select work as a regular html select item rather than a dropdown ?
假设在这个FIDDLE 中，如果我选择“男性”，并再次想要取消选择该选项并显示占位符/默认文本“性别”，我将无法做到。有人可以帮我找出一种方法来使选择作为常规的 html 选择项而不是下拉列表工作吗？
HTML Code
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 Code
JavaScript 代码
$(".ui.fluid.dropdown").dropdown({})
回答by Alsmile
Try this :
试试这个 ：
$('select.dropdown').dropdown({placeholder:'Your placeholder'});
see Semantic UI(or Semantic UI CNfor a Chinese version) for more info.
有关详细信息，请参阅Semantic UI（或中文版的Semantic UI CN）。
回答by J3Y
In the classic HTML <select>element, it treats your empty valued <option value="">Gender</option>as another dropdown menu item.
在经典的 HTML<select>元素中，它将您的空值<option value="">Gender</option>视为另一个下拉菜单项。
However, Semantic UI uses the empty valued <option>as the placeholder text. If you want Genderas a selectable option, it should really be another item that is independent of your placeholder text.
但是，语义 UI 使用空值<option>作为占位符文本。如果您希望Gender作为可选选项，它应该是另一个独立于占位符文本的项目。
If you want the ability to clearthe selection, I think there are better UX paradigms to handle this. For example, you could have an external clear selectionbutton which calls:
如果你想要清除选择的能力，我认为有更好的 UX 范式来处理这个问题。例如，您可以有一个外部清除选择按钮，它调用：
$('.ui.fluid.dropdown').dropdown('clear')
Another more streamlined option might be to use the multi-selection dropdown, and limit the maxSelections = 1, the first example from the examples page. That way the user gets an impression that they have selected something, and to clear the selection they use an element within the same dropdown container.
另一个更简化的选项可能是使用多选下拉菜单，并限制示例页面中maxSelections = 1的第一个示例。这样用户就会得到他们选择了一些东西的印象，并且为了清除选择，他们使用同一个下拉容器中的元素。
回答by Ashkon
You should know that .dropdown()in Semantic UI removes any null value from your selectby default.
您应该知道，.dropdown()在语义 UI 中select，默认情况下会删除您的任何空值。
Nevertheless, there are some approaches to what you are looking for.
不过，有一些方法可以满足您的需求。
Check this fiddle.
检查这个小提琴。
回答by Michael Batista
$('.ui.dropdown').dropdown({
clearable: true
});
