下拉菜单

下载

一个下拉菜单

下拉菜单可以格式化，使其菜单指向

主页论坛联系我们

底部指向的下拉菜单具有向上打开的子菜单

下拉菜单可以显示为浮动在元素下方。

保存

一个简单的下拉菜单可以在没有 Javascript 的情况下打开

活动的dropdown菜单已打开

活动状态只会自动打开ui simple dropdown。要激活普通下拉菜单，请使用$('.ui.dropdown').dropdown('show');

禁用的下拉菜单或项目不允许用户交互

使用可清除设置将允许用户从下拉菜单中删除他们的选择。

显示我当前可用的类。

$('.clearable.example .ui.selection.dropdown') .dropdown({ clearable: true }) ; $('.clearable.example .ui.inline.dropdown') .dropdown({ clearable: true, placeholder: 'any' }) ;

使用maxSelections可以强制选择项的最大数量。您也可以使用表单验证规则来指定表单内多选下拉菜单的最小和最大验证设置。

$('.max.example .ui.normal.dropdown') .dropdown({ maxSelections: 3 }) ; $('.max.example .ui.special.dropdown') .dropdown({ useLabels: false, maxSelections: 3 }) ;

使用allowAdditions: true可以允许用户添加他们自己的选项。这适用于单选或多选搜索下拉菜单。

虽然所有下拉菜单都支持select初始化，但自定义选项不会在页面刷新时保存，除非您使用隐藏的输入。这是因为动态创建的option不会在页面刷新时保留。

$('.tag.example .ui.dropdown') .dropdown({ allowAdditions: true }) ;

有时多选下拉菜单包含选项很长，作为标签显示会很别扭。设置useLabels: false会显示一个选中数量，并允许直接从菜单中重新选择。

您可以通过调整settings.message中的模板来自定义任何显示的消息。

或

$('.no.label.example .ui.dropdown') .dropdown({ useLabels: false }) ;

如果下拉菜单无法适应屏幕，则下拉菜单会自动更改其打开方向。如果您需要下拉菜单在特定方向打开，您可以在初始化下拉菜单时指定它。

$('.upward.example .dropdown') .dropdown({ direction: 'upward' }) ;

搜索选择下拉菜单可以指定API设置来远程检索值，这可以使用命名的 API action或url。

使用 API 允许用户从大型数据集（太大而无法直接包含在页面标记中）中选择选项。

如果您的后端没有设计为返回正确的标记，您可以使用 API 的onResponse回调来调整从服务器接收 API 响应的格式。

对同一个 API 端点的请求会自动缓存在本地，以避免服务器往返。您可以在调整cache API 设置时禁用此功能。

当用户刷新页面时，选择标签会使用sessionStorage存储所选值的相应名称来自动重新创建。您可以通过设置saveRemoteData: false来禁用此功能。

最喜欢的动物

$('.remote.filter.example .ui.dropdown') .dropdown({ apiSettings: { // 此 url 在服务器端解析查询并返回过滤后的结果 url: '//api.semantic-ui.com/tags/{query}' }, }) ;

// 预期的服务器响应 { "success": true, "results": [ { // 下拉菜单中显示的名称 "name" : "Choice 1", // 选中的值 "value" : "value1", // 选择后显示的名称（可选） "text" : "Choice 1" // 字段是否应显示为禁用（可选） "disabled" : false }, { "name" : "Choice 2", "value" : "value2", "text" : "Choice 2" }, { "name" : "Choice 3", "value" : "value3", "text" : "Choice 3" }, { "name" : "Choice 4", "value" : "value4", "text" : "Choice 4" }, { "name" : "Choice 5", "value" : "value5", "text" : "Choice 5" } ] }

当可能的选项集很大时，理想情况下，API 结果应该只返回与传递的查询词匹配的值以减少网络传输。但是，如果只有几百个或更少的选项，您可以考虑从 API 端点返回完整的结果集，并使用设置filterRemoteData: true在客户端根据查询进行过滤。

最喜欢的动物

$('.remote.choices.example .ui.dropdown') .dropdown({ apiSettings: { // 此 url 只返回一个标签列表（使用上面预期的 API 响应） url: '//api.semantic-ui.com/tags/' }, filterRemoteData: true }) ;

下拉菜单可以指定不同的过渡。

$('.dropdown') .dropdown({ // 您可以使用任何 ui 过渡 transition: 'drop' }) ;

切换

使用带allowCategorySelection: true的多级菜单将允许选择带有子菜单的项目。

$('.category.example .ui.dropdown') .dropdown({ allowCategorySelection: true }) ;

一个按钮可以与下拉菜单一起格式化。

使用combo操作将更改前一个元素为所选值。

$('.combo.dropdown') .dropdown({ action: 'combo' }) ;

保存

下拉菜单支持不同的默认操作，这些操作可以在选择项目时发生。例如，您可以设置您的下拉菜单不更改其文本，或者从其菜单中选择一个值。

$('.link.example .dropdown') .dropdown({ action: 'hide' }) ;

一个菜单元素可以包含一个下拉菜单。

使用预先存在的 HTML 初始化下拉菜单比直接在select元素上初始化下拉菜单性能更高。

任何初始化为下拉菜单的 select 元素也会被隐藏，直到 Javascript 创建 HTML 为止，这样做是为了避免未修饰内容的闪烁，以及元素高度变化调整页面流。

$('.ui.dropdown') .dropdown() ;

您可以在设置对象中指定一个值列表，以避免自己填充 html。

在项目中添加selected: true将使该项目默认被选中。

您也可以使用placeholder设置来指定在选择选项之前要显示的占位符文本。

$('.ui.dropdown') .dropdown({ values: [ { name: '男', value: 'male' }, { name : '女', value : 'female', selected : true } ] }) ;

为了方便起见，select元素可以自动转换为selection dropdown。带有空字符串值的 select 选项将转换为提示文本。

$('#select') .dropdown() ;

作为第三种选择，您可以在select周围包含一个包装器，这样它将在页面加载时正确显示，然后在 Javascript 触发时填充隐藏的菜单。在这种情况下，select元素不会接收ui dropdown类。

$('#hybrid select') .dropdown({ on: 'hover' }) ;

使用search selection dropdown将允许用户更轻松地在大型列表中搜索。这也可以直接从表单 select 元素转换。

$('#search-select') .dropdown() ;

您可以通过select元素的multiple属性或在下拉菜单中包含multiple类来允许多选。

当使用带有隐藏输入的预先存在的 HTML 时，值将通过单个值传递，并以分隔符隔开。默认值为 "，"，但这可以通过调整delimiter设置来更改。

$('#multi-select') .dropdown() ;

下拉菜单有多个内置操作，这些操作可以在项目选择时发生。您可以通过将操作名称传递给settings.action来指定内置操作，或者传递一个执行操作的自定义函数。

操作	描述
activate （默认）	选择当前项目，调整下拉菜单值并更改下拉菜单文本
combo	与 activate 相同，但更新前一个元素的文本而不是自身
select	从菜单中选择当前项目并存储值，但不更改下拉菜单文本
hide	隐藏下拉菜单并存储值，但不更改文本
function(text, value){}	自定义操作
无	不执行任何操作

要指定不同的内置操作，只需指定名称。

$('.dropdown') .dropdown({ action: 'combo' }) ;

要仅触发您的自定义操作而不触发默认操作，请为settings.action指定您自己的函数。

$('.dropdown') .dropdown({ action: function(text, value) { // 不执行任何内置操作 } }) ;

如果您希望同时执行内置操作和自定义操作，请将onChange与action结合使用

$('.dropdown') .dropdown({ action: 'hide', onChange: function(value, text, $selectedItem) { // 自定义操作 } }) ;

所有以下行为都可以使用以下语法调用

$('.your.element') .dropdown('behavior name', argumentOne, argumentTwo) ;

行为	描述
setup menu(values)	根据传入的值重新创建下拉菜单。`values`应为具有以下结构的对象：`{ values: [ {value, text, name} ] }`。
change values (values)	更改下拉菜单以使用新值
refresh	刷新所有缓存的选择器和数据
toggle	切换下拉菜单的当前可见性
show	显示下拉菜单
hide	Hides dropdown
clear	清除下拉菜单的选择
hide others	隐藏所有其他下拉菜单，这些下拉菜单不是当前下拉菜单
restore defaults	将下拉菜单的文本和值恢复到页面加载时的值
restore default text	将下拉菜单的文本恢复到页面加载时的值
restore placeholder text	将下拉菜单的文本恢复到其提示，占位符文本
restore default value	将下拉菜单的值恢复到页面加载时的值
save defaults	将当前文本和值保存为新默认值（用于恢复）
set selected(value)	将值设置为选中
remove selected(value)	从选中中删除值
set selected([value1, value2])	将一组值添加为选中
set exactly([value1, value2])	将选定的值设置为确切指定的值，删除当前选择
set text(text)	将下拉菜单的文本设置为值
set value(value)	将下拉菜单的输入设置为值（不更新显示状态）
get text	返回当前下拉菜单的文本
get value	返回当前下拉菜单的输入值
get item(value)	返回与给定输入值匹配的 DOM 元素
bind touch events	向元素添加触摸事件
bind mouse events	向元素添加鼠标事件
bind intent	绑定对文档的点击以确定是否单击下拉菜单之外
unbind intent	取消绑定文档意图点击
determine intent	返回事件是否发生在下拉菜单内
determine select action(text, value)	根据传递文本/值的设置触发预设项目选择操作
set active	将下拉菜单设置为活动状态
set visible	将下拉菜单设置为可见状态
remove active	删除下拉菜单的活动状态
remove visible	删除下拉菜单的可见状态
is selection	返回下拉菜单是否为选择下拉菜单
is animated	返回下拉菜单是否为动画
is visible	返回下拉菜单是否可见
is hidden	返回下拉菜单是否隐藏
get default text	返回页面加载时设置的下拉菜单值
get placeholder text	返回占位符文本

设置	默认	描述
values	false	指定后，您可以使用特定值初始化下拉菜单。有关详细信息，请参阅使用指南。
on	click	用于触发下拉菜单的事件（悬停、单击、自定义事件）
clearable	false	用户在选择下拉菜单值后是否可以将其清除。
ignoreCase	false 2.2.13 中新增	将具有匹配大小写的值视为相同，以便将它们添加到下拉菜单中。
allowReselection	false	设置为`true`时，即使用户选择的值与当前选择的值匹配，也会触发`onChange`。
allowAdditions	false	搜索选择是否应允许用户添加自己的选择，适用于单选或多选。
hideAdditions	true	如果禁用了用户添加，添加项将出现在下拉菜单中，使用由`templates.addition`格式化的特殊格式的选择项。
action	auto	设置要执行的默认操作。（请参阅使用指南） activate (default) 使用选定的值更新下拉菜单的文本，将元素状态设置为活动状态，如果可用，则更新任何隐藏的字段 select 激活菜单并更新输入字段，但不更改当前文本 combo 更改先前同级元素的文本无不执行任何操作 hide 下拉菜单隐藏 function(text, value, element){} 使用回调中指定的值执行自定义函数
minCharacters	1	搜索开始显示结果的最小字符数
match	both	使用`搜索选择`时，指定如何匹配值。 both 匹配文本和值 value 仅匹配值 text 仅匹配文本
selectOnKeydown	true	下拉菜单是否应在使用键盘快捷键时选择新选项。设置为`false`将需要`enter`或左键单击确认选择。
forceSelection	true	搜索选择是否会在元素失去焦点时强制使用当前选择的选项。
allowCategorySelection	false	具有子菜单（类别）的菜单项是否可选中
placeholder	auto	auto 将具有 ""（空字符串）值的选项转换为占位符文本 value 将字符串值设置为占位符文本，保留 "" 值 false 保留 "" 值作为可选择选项

设置	默认	描述
apiSettings	false	可以设置为一个对象，以指定API 设置，用于从 API 端点检索远程选择菜单内容
fields	fields: { remoteValues : 'results', // API 结果分组 values : 'values', // 所有下拉菜单值的分组 name : 'name', // 显示的下拉菜单文本 value : 'value' // 实际的下拉菜单值 }	使用 API 时，将下拉菜单内容列表映射到 JSON 属性
filterRemoteData	false	API 返回的结果在显示之前是否应根据查询进行过滤
saveRemoteData	true	启用后，将自动将选定的名称/值对存储在`sessionStorage`中，以在页面刷新时保留用户选择。禁用将清除刷新时的远程下拉菜单值。

设置	默认	描述
useLabels	true	多选是否应使用标签。当`allowAdditions`为`true`时，必须设置为 true
maxSelections	false	设置为数字时，设置最大选择数
glyphWidth	1.0714	最大字形宽度，用于计算搜索大小。这通常是您字体中“W”的大小（以`em`为单位）
label	label: { transition : 'horizontal flip', duration : 200, variation : false }	允许自定义多选标签

设置	默认	描述
direction	'auto'	设置为`auto`时，根据下拉菜单是否可以适合屏幕来确定方向。设置为`upward`或`downward`始终强制方向。
keepOnScreen	true	下拉菜单是否应尝试通过检查菜单显示位置是否在其`context`中来保持自身在屏幕上（默认上下文为页面）。
context	window	当`keepOnScreen: true`时，用于检查是否可以显示的元素上下文
fullTextSearch	false	指定为“true”将使用模糊全文搜索，设置为“exact”将强制在字符串中的某个位置匹配精确搜索，设置为“false”将仅匹配字符串的开头。
preserveHTML	true	下拉菜单值中包含的 HTML 是否应保留。（允许图标显示在选定的值中）
sortSelect	false	从选择元素自动创建下拉菜单时是否排序值。
showOnFocus	true	是否在元素获得焦点时自动显示下拉菜单。
allowTab	true	是否允许元素通过键盘导航，通过自动创建`tabindex`
transition	auto (slide down / slide up)	在对菜单进行动画进出时要使用的命名过渡。默认为`slide down`或`slide up`，具体取决于下拉菜单的方向。Fade 和 slide down 可用，无需包含ui transitions
duration	200	动画事件的持续时间
keys	keys : { backspace : 8, delimiter : 188, // 逗号 deleteKey : 46, enter : 13, escape : 27, pageUp : 33, pageDown : 34, leftArrow : 37, upArrow : 38, rightArrow : 39, downArrow : 40 }	用于表示键盘快捷键的`keycode`。为了避免某些外语出现问题，您可以为逗号分隔符的值传递`false`
delay	delay : { hide : 300, show : 200, search : 50, touch : 50 }	使用`on: hover`或触摸时，对显示或隐藏行为进行去抖动的毫秒数。

	上下文	描述
onChange(value, text, $choice)	下拉菜单	下拉菜单值更改后调用。接收选择的名称和值以及活动菜单元素
onAdd(addedValue, addedText, $addedChoice)	下拉菜单	使用多选下拉菜单添加下拉菜单选择后调用，仅接收添加的值
onRemove(removedValue, removedText, $removedChoice)	下拉菜单	使用多选下拉菜单删除下拉菜单选择后调用，仅接收删除的值
onLabelCreate(value, text)	$label (jQDOM)	允许您在添加标签之前修改标签。需要返回标签的 jQ DOM 元素。
onLabelRemove(value)	$label (jqDOM)	删除标签时调用，`return false;`将阻止标签被删除。
onLabelSelect($selectedLabels)	下拉菜单	用户选择标签后调用
onNoResults(searchValue)	下拉菜单	在下拉菜单搜索没有匹配的值后调用
onShow	下拉菜单	在显示下拉菜单之前调用。如果返回`false`，则不会显示下拉菜单。
onHide	下拉菜单	在隐藏下拉菜单之前调用。如果返回`false`，则不会隐藏下拉菜单。

	默认	描述
namespace	dropdown	事件命名空间。确保模块拆卸不会影响附加到元素的其他事件。
message	您可以通过修改`$.fn.dropdown.settings.message`来指定站点范围的消息，这些消息将在任何下拉菜单中显示，前提是它出现在页面中。 message: { addResult : '添加{term}', count : '{count} 个选中', maxSelections : '最多 {maxCount} 个选择', noResults : '没有找到结果。' }
selector	selector : { addition : '.addition', dropdown : '.ui.dropdown', icon : '> .dropdown.icon', input : '> input[type="hidden"], > select', item : '.item', label : '> .label', remove : '> .label > .delete.icon', siblingLabel : '.label', menu : '.menu', message : '.message', menuIcon : '.dropdown.icon', search : 'input.search, .menu > .search > input', text : '> .text:not(.icon)' }
regExp	regExp : { escape : /[-[\]{}()*+?.,\\^$\|#\s]/g, }
metadata	metadata : { defaultText : '默认文本', defaultValue : '默认值', placeholderText : '占位符文本', text : '文本', value : '值' }
className	className : { active : 'active', addition : 'addition', animating : 'animating', disabled : 'disabled', dropdown : 'ui dropdown', filtered : 'filtered', hidden : 'hidden transition', item : 'item', label : 'ui label', loading : 'loading', menu : 'menu', message : 'message', multiple : 'multiple', placeholder : 'default', search : 'search', selected : 'selected', selection : 'selection', upward : 'upward', visible : 'visible' }
name	下拉菜单	调试日志中使用的名称
silent	False	静默所有控制台输出，包括错误消息，无论其他调试设置如何。
debug	False	在控制台中提供标准调试输出
performance	True	在控制台中提供性能统计信息，并抑制其他调试输出。
verbose	True	在控制台中提供辅助调试输出
error	error : { action : '您调用了未定义的下拉菜单操作', alreadySetup : '一旦选择被初始化，行为必须在创建的 ui 下拉菜单上调用', labels : '允许用户添加目前需要使用标签。', method : '您调用的方法未定义。', noTransition : '此模块需要 ui 过渡' }' }

下拉菜单
下拉菜单允许用户从一系列选项中选择一个值

指向

浮动

简单

活动

禁用

可清除
2.4.0 中的新功能

最大选择数量

标签和用户添加

文本标签

向上

在服务器上匹配搜索查询

远程返回所有选项

更改过渡

类别选择

组合下拉菜单

链接下拉菜单

菜单

初始化现有 HTML

仅使用 Javascript 初始化
2.2.12 中的新功能

转换表单元素

混合表单初始化

搜索下拉菜单

多选

下拉菜单

选择

指定选择操作

常用设置

远程设置

多选设置

其他设置

社区

网络

帮助保护这个项目

UI 框架

独立

包管理器

包管理器

类型

下拉菜单

选择

搜索选择

多选

多选搜索

搜索下拉菜单

菜单内搜索

内联

趋势仓库 今天 调整时间跨度 今天 本周 本月

指向

浮动

简单

内容

页眉

分隔线

图标

描述

标签

消息

浮动内容

输入

图像

州

加载

错误

活动

禁用

变化

滚动

紧凑

流体

菜单方向

选择下拉菜单

可清除2.4.0 中的新功能

最大选择数量

标签和用户添加

文本标签

清除下拉菜单

恢复默认值

向上

远程内容

在服务器上匹配搜索查询

远程返回所有选项

菜单

更改过渡

多级

类别选择

保留用户选择

调整操作

组合下拉菜单

链接下拉菜单

耦合

按钮组

菜单

表单

初始化

初始化现有 HTML

仅使用 Javascript 初始化2.2.12 中的新功能

指定不同的文本和隐藏输入值

转换表单元素

混合表单初始化

搜索下拉菜单

多选

下拉菜单

选择

指定选择操作

行为

下拉菜单

常用设置

远程设置

多选设置

其他设置

回调函数

模块设置

DOM 设置DOM 设置指定此模块应如何与 DOM 交互

趋势仓库

今天

调整时间跨度

今天

本周

本月

可清除
2.4.0 中的新功能

仅使用 Javascript 初始化
2.2.12 中的新功能

DOM 设置
DOM 设置指定此模块应如何与 DOM 交互

模糊消息
模糊子标题