ドロップダウン

ダウンロード

ドロップダウン

ドロップダウンは、メニューが指し示すようにフォーマットできます。

ホームフォーラムお問い合わせ

下向きに指し示すドロップダウンメニューは、サブメニューを上向きに開きます。

ドロップダウンメニューは、要素の下にフローティング表示されるようにすることができます。

保存

シンプルなドロップダウンは、Javascriptなしで開くことができます。

アクティブなドロップダウンは、メニューが開いています。

アクティブ状態は、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エンドポイントのリクエストは、サーバーとの往復を回避するために、自動的にローカルにキャッシュされます。cacheAPI設定を調整することで、これを無効にできます。

ユーザーがページを更新すると、選択した値に対応する名前を格納するためにsessionStorageを使用して、選択ラベルが自動的に再作成されます。saveRemoteData: falseを設定することで、この機能を無効にできます。

好きな動物

好きな動物たち

$('.remote.filter.example .ui.dropdown') .dropdown({ apiSettings: { // このURLは、サーバー側でクエリを解析し、フィルタリングされた結果を返します url: '//api.semantic-ui.com/tags/{query}' }, }) ;

// 期待されるサーバーレスポンス { "success": true, "results": [ { // ドロップダウンに表示される名前 "name" : "選択肢1", // 選択された値 "value" : "value1", // 選択後に表示される名前（オプション） "text" : "選択肢1" // フィールドを無効として表示する必要があるかどうか（オプション） "disabled" : false }, { "name" : "選択肢2", "value" : "value2", "text" : "選択肢2" }, { "name" : "選択肢3", "value" : "value3", "text" : "選択肢3" }, { "name" : "選択肢4", "value" : "value4", "text" : "選択肢4" }, { "name" : "選択肢5", "value" : "value5", "text" : "選択肢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: 'Male', value: 'male' }, { name : 'Female', value : 'female', selected : true } ] });

便宜上、select要素は自動的に選択ドロップダウンに変換できます。空文字列値を持つ選択オプションは、プロンプトテキストに変換されます。

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

3番目のオプションとして、select要素をラップして、ページロード時に正しく表示されるようにし、その後、JavaScriptが実行されたときに**非表示のメニューを設定**することができます。この場合、select要素はui dropdownクラスを受け取りません。

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

検索選択ドロップダウンを使用すると、ユーザーは長いリストを簡単に検索できます。これは、フォームのselect要素からも直接変換できます。

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

select要素のmultipleプロパティを使用するか、ドロップダウンにmultipleクラスを含めることで、複数選択を許可できます。

非表示の入力値を持つ既存のHTMLを使用する場合、値はデリミタで区切られた単一の値として渡されます。デフォルトは「,」ですが、delimiter設定を調整することで変更できます。

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

ドロップダウンには、項目選択時に発生する複数の組み込みアクションがあります。組み込みアクションをsettings.actionにその名前を渡すか、アクションを実行するカスタム関数を渡すことで指定できます。

アクション	説明
activate（デフォルト）	現在の項目を選択し、ドロップダウン値を調整し、ドロップダウンテキストを変更します。
combo	activateと同じですが、自分自身ではなく前の要素のテキストを更新します。
select	メニューから現在の項目を選択し、値を保存しますが、ドロップダウンテキストは変更しません。
hide	ドロップダウンメニューを非表示にし、値を保存しますが、テキストは変更しません。
`function(text, value){}`	カスタムアクション
nothing	何も行いません。

異なる組み込みアクションを指定するには、名前を指定するだけです。

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

**カスタムアクションのみ**をトリガーし、デフォルトアクションをトリガーしないようにするには、settings.actionに独自の関数を指定します。

$('.dropdown').dropdown({ action: function(text, value) { // 組み込みのアクションは発生しません } });

組み込みアクションとカスタムアクションの両方を発生させるには、actionと組み合わせてonChangeを使用します。

$('.dropdown').dropdown({ action: 'hide', onChange: function(value, text, $selectedItem) { // カスタムアクション } });

以下のすべての動作は、次の構文を使用して呼び出すことができます。

$('.your.element').dropdown('動作名', 引数1, 引数2);

動作	説明
setup menu(values)	渡された値からドロップダウンメニューを再作成します。`values`は、次の構造を持つオブジェクトである必要があります。`{ values: [ {value, text, name} ] }`。
change values (values)	ドロップダウンが新しい値を使用するように変更します。
refresh	すべてのキャッシュされたセレクターとデータを更新します。
toggle	ドロップダウンの現在の表示状態を切り替えます。
show	ドロップダウンを表示します。
hide	ドロップダウンを非表示にします。
clear	ドロップダウンの選択をクリアします。
hide others	現在のドロップダウン以外のすべてのドロップダウンを非表示にします。
restore defaults	ドロップダウンのテキストと値をページロード時の値に復元します。
restore default text	ドロップダウンのテキストをページロード時の値に復元します。
restore placeholder text	ドロップダウンのテキストをプロンプト、プレースホルダーテキストに復元します。
restore default value	ドロップダウンの値をページロード時の値に復元します。
save defaults	現在のテキストと値を新しいデフォルトとして保存します（restoreで使用）。
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	ドキュメントの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（デフォルト）選択された値でドロップダウンテキストを更新し、要素の状態をアクティブに設定し、利用可能な場合は非表示のフィールドを更新します。 select メニューをアクティブ化し、入力フィールドを更新しますが、現在のテキストは変更しません。 combo 前の兄弟要素のテキストを変更します。 nothing アクションは発生しません。 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	select 要素からドロップダウンを自動的に作成する際に値をソートするかどうか。
showOnFocus	true	要素にフォーカスしたときにドロップダウンメニューを自動的に表示するかどうか。
allowTab	true	`tabindex` を自動的に作成することで、キーボードで要素を操作できるようにするかどうか。
transition	auto (スライドダウン/スライドアップ)	メニューの表示と非表示をアニメーションで切り替える際に使用する名前付きトランジション。ドロップダウンの方向に応じて`スライドダウン`または`スライドアップ`がデフォルトになります。 ui トランジションを含めずにフェードとスライドダウンを使用できます。
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 : 'defaultText', defaultValue : 'defaultValue', placeholderText : 'placeholderText', text : 'text', value : '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 : 'select が初期化された後は、作成された ui ドロップダウンで動作を呼び出す必要があります。', labels : 'ユーザーによる追加を許可するには、ラベルを使用する必要があります。', method : '呼び出したメソッドは定義されていません。', noTransition : 'このモジュールには ui トランジションが必要です。'}' }

翻訳の支援問題の報告チャットへの参加 CLA

GitHub リポジトリユーザーフォーラム 1.x ドキュメント 0.x ドキュメント

Semantic UI の継続的な開発へのサポートは、コミュニティから直接提供されています。

無料＆オープンソース (MIT)

ドロップダウン
ドロップダウンを使用すると、ユーザーは複数の選択肢から値を選択できます。

ドロップダウン

ポインティング

フローティング

シンプル

アクティブ

無効

クリア可能
2.4.0の新機能

最大選択数

タグ付けとユーザー追加

テキストラベル

上向き

サーバーで検索クエリに一致

すべての選択肢をリモートで返す

トランジションの変更

カテゴリ選択

コンボドロップダウン

リンクドロップダウン

メニュー

既存HTMLの初期化

JavaScriptのみを使用した初期化
2.2.12の新機能

フォーム要素の変換

ハイブリッドフォームの初期化

ドロップダウンの検索

複数選択

ドロップダウン

選択

選択アクションの指定

頻繁に使用される設定

リモート設定

複数選択設定

追加の設定

コミュニティ

ネットワーク

このプロジェクトの維持にご協力ください

UIフレームワーク

スタンドアロン

パッケージマネージャー

パッケージマネージャー

種類

ドロップダウン

選択

検索による選択

複数選択

複数検索選択

検索ドロップダウン

メニュー内検索

インライン

トレンドのリポジトリ 今日 期間の調整 今日 今週 今月

ポインティング

フローティング

シンプル

コンテンツ

ヘッダー

区切り線

アイコン

説明

ラベル

メッセージ

フローティングコンテンツ

入力

画像

ステート

読み込み中

エラー

アクティブ

無効

バリエーション

スクロール

コンパクト

フル幅

メニューの方向

選択ドロップダウン

クリア可能2.4.0の新機能

最大選択数

タグ付けとユーザー追加

テキストラベル

ドロップダウンのクリア

デフォルトの復元

上向き

リモートコンテンツ

サーバーで検索クエリに一致

すべての選択肢をリモートで返す

メニュー

トランジションの変更

複数レベル

カテゴリ選択

ユーザー選択の保持

操作の調整

コンボドロップダウン

リンクドロップダウン

結合

ボタングループ

メニュー

フォーム

初期化

既存HTMLの初期化

JavaScriptのみを使用した初期化2.2.12の新機能

異なるテキストと非表示入力値の指定

フォーム要素の変換

ハイブリッドフォームの初期化

ドロップダウンの検索

複数選択

ドロップダウン

選択

選択アクションの指定

動作