OnsSelect Directive (ons-select)

<ons-select>要素のAngularディレクティブです。

セレクトボックスを表示するコンポーネントです。select 要素に使用できる属性の多くが ons-select 要素でも利用できます。

実例

Select input

The <ons-select> element is used to display a select box with an arbitrary number of options.

There are several attributes that can be used to customize the behavior of the element. These are the same attributes as those that can be used for the regular HTML <select> element.

If you want to place a select with an ID of my-id on a page, use <ons-select select-id="my-id">.

Please check the Onsen UI Reference documentation for a complete reference of the enabled attributes.

Getting the value

ons-select can be combined with ngModel in order to bind its value with a scope variable.

関連情報

属性

名前 型 / デフォルト値 概要
autofocus Boolean
false
ページロード時にこのセレクトボックスにフォーカスが移るようにします。 Optional.
disabled Boolean
false
このセレクトボックスを無効化する場合に指定します。 Optional.
form String このセレクトボックスを、指定した form 要素に紐付けます。セレクトボックスを form 要素の外側に配置する際に使用します。 Optional.
multiple Boolean
false
選択肢の複数選択を有効にします。 Optional.
name String このセレクトボックスの名前を指定します。通常 form 要素と共に使用します。 Optional.
required Boolean このセレクトボックスを入力必須にする場合に指定します。通常 form 要素と共に使用します。 Optional.
select-id String このセレクトボックスが内部に持つ select 要素に与える ID を指定します。セレクトボックスの内容を動的に変更する必要がある場合に使用します。 Optional.
size Number
1
一度に表示する選択肢の個数を指定します。選択肢がこの属性で指定した個数よりも多い場合、スクロールが有効になります。 Optional.

プロパティ概要

名前 概要
length このセレクトボックスに含まれる選択肢の個数を返します。 select 要素
options このセレクトボックスに含まれる option 要素の配列を返します。
selectedIndex 現在選択されている選択肢のインデックスを返します。
value 現在選択されている選択肢の値を返します。

プリセットのmodifier

Name 概要
material Displays a Material Design select input. (翻訳中)
underbar Displays a horizontal line underneath a select input. (翻訳中)

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。