セレクトボックスを表示するコンポーネントです。select 要素に使用できる属性の多くが ons-select 要素でも利用できます。
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.
ons-select can be combined with ng-model 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 | 現在選択されている選択肢の値を返します。 |
| Name | 概要 |
|---|---|
| material | Displays a Material Design select input. （翻訳中） |
| underbar | Displays a horizontal line underneath a select input. （翻訳中） |
| シグネチャ | 概要 |
|---|---|
| on(eventName, listener) | イベントリスナーを追加します。 |
| once(eventName, listener) | 一度だけ呼び出されるイベントリスナーを追加します。 |
| off(eventName, [listener]) | イベントリスナーを削除します。もしイベントリスナーを指定しなかった場合には、そのイベントに紐づく全てのイベントリスナーが削除されます。 |
イベントリスナーを追加します。
| 名前 | 型 | 概要 |
|---|---|---|
| eventName | String | イベント名を指定します。 |
| listener | Function | このイベントが発火された際に呼び出される関数オブジェクトを指定します。 |
一度だけ呼び出されるイベントリスナーを追加します。
| 名前 | 型 | 概要 |
|---|---|---|
| eventName | String | イベント名を指定します。 |
| listener | Function | イベントが発火した際に呼び出される関数オブジェクトを指定します。 |
イベントリスナーを削除します。もしイベントリスナーを指定しなかった場合には、そのイベントに紐づく全てのイベントリスナーが削除されます。
| 名前 | 型 | 概要 |
|---|---|---|
| eventName | String | イベント名を指定します。 |
| listener | Function | 削除するイベントリスナーを指定します。 |
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。