表示例
記述形式
<div rcf:type="Select" ... ></div>
または
<span rcf:type="Select" ... ></span>
注意
子要素は指定できません。詳細は、「5.1.4 子要素を持たない部品に子要素を記述した場合の動作」を参照してください。
ポイント
本部品は以下のように表示されます。
<div>タグの場合:前後に改行コードが挿入されます。
<span>タグの場合:前後に改行コードは挿入されません。
プロパティ
表の項目の意味は、「Text」の「プロパティ」を参照してください。
名前 | データ型 | 説明 | 省略 | 省略値 | 属性指定 | 更新 | 部分更新 |
|---|---|---|---|---|---|---|---|
options | Array | 選択項目を表す値を指定します。
| 可 | [] | 値、バインド(注5) | 可 | 可(注3) |
multiple | Boolean | 複数選択または単一選択を指定します。
| 可 | false | 値 | 不可 | 不可 |
selectedIndex | Number | 単一選択の場合
複数選択の場合
optionsプロパティの値が変更された場合、本プロパティは-1(選択なし)に設定されます。 | 可 | -1 | 値、バインド | 可(注1) | 不可 |
selectedIndexes | NumberのArray | 選択されている項目のインデックス(先頭は0)の配列を指定します。選択順にインデックスが格納されます。 | 可 | [] | 値、バインド | 可(注2) | 可(注2)(注4) |
selectedValue | String | 単一選択の場合
複数選択の場合
optionsプロパティの値が変更された場合、本プロパティには空文字列(選択なし)が設定されます。 | 可 | "" | 値、バインド | 可(注1) | 不可 |
selectedValues | StringのArray | 選択されている項目の値の配列を指定します。選択順にインデックスが格納されます。 | 可 | [] | 値、バインド | 可(注2) | 可(注2)(注4) |
size | Number | 選択リストの高さ(行数)を指定します。 | 可 | (自動設定) | 値、バインド | 可 | 不可 |
title | String | optionsプロパティがStringの配列またはObjectの配列で、かつ各Objectがtitle属性でない場合のツールチップで表示されるテキストを指定します。 | 可 | "" | 値、バインド | 可 | 不可 |
enabled | Boolean | 本部品の有効/無効を指定します。
| 可 | true | 値、バインド | 可 | 不可 |
tabIndex | Number | Tabキーで移動するフォーカスの順番を指定します。 | 可 | 0 | 値 | 可 | 不可 |
注1) 単一選択(multiple=false)の場合にだけ、更新できます。
注2) 複数選択(multiple=true)の場合にだけ、更新できます。
注3) 追加(add)、挿入(insert)、削除(remove)、変更(replace)に対応します。
注4) 追加(add)、削除(remove)に対応します。
注5) Objectの配列の場合は、バインディング式だけ記述できます。
部品共通のプロパティも指定できます。詳細は、「2.8.1 画面部品共通プロパティ」を参照してください。
注意
titleプロパティに長い文字列を指定すると、自動的に改行または省略されることがあります。
また、発生位置はブラウザにより異なります。
なお、空文字列を指定した場合は、表示されません。
optionsプロパティにObjectの配列で指定する形式について、以下に示します。
{
label: "項目のラベル",
value: "項目の値",
enabled: true|false,
title: "ツールチップ文字列"
}プロパティの詳細を以下に示します。
プロパティ名 | データ型 | 説明 | 省略 | 省略値 |
|---|---|---|---|---|
label | String | 項目のラベルを指定します。 | 可 | valueの値 |
value | String | 項目の値を指定します。 | 不可 | － |
enabled | Boolean | 項目の選択の許可/禁止を指定します。
| 可 | true |
title | String | 補足情報です。 | 可 | ツールチップ非表示 |
selectedIndex、selectedIndexes、selectedValue、およびselectedValuesの4つのプロパティは、multipleの値によって、以下のように扱いが異なります。
通常、以下のプロパティを使用して、値の取得および設定を行ってください。
multiple=false(単一選択)の場合
selectedIndex
selectedValue
multiple=true(複数選択)の場合
selectedIndexes
selectedValues
multiple=false(単一選択)の場合
selectedIndexの値を設定した場合、そのほかのプロパティは以下のように値が変更されます。
selectedIndexの値 | 変更後の値 | ||
|---|---|---|---|
selectedIndexes | selectedValue | selectedValues | |
-1 | [](長さ0の配列) | ""(空文字列) | [](長さ0の配列) |
-1以外 | selectedIndexの値を持った長さ1の配列 | 指定されたインデックスの選択項目のvalue | 指定されたインデックスの選択項目のvalueを持った長さ1の配列 |
selectedValueの値を設定した場合、そのほかのプロパティは以下のように値が変更されます。
selectedValueの値 | 変更後の値 | ||
|---|---|---|---|
selectedIndex | selectedIndexes | selectedValues | |
""(空文字列) | -1 | [](長さ0の配列) | [](長さ0の配列) |
空ではない文字列 | 指定されたvalueを持つ選択項目のインデックス | 指定されたvalueを持つ選択項目のインデックスを持った長さ1の配列 | selectedValueの値を持った長さ1の配列 |
タグにselectedIndexやselectedValueの初期値が指定されていた場合も、上記のルールに従って動作します。ただし、selectedIndexとselectedValueが共に指定されていた場合は、selectedIndexが優先されます。
タグに指定されたselectedIndexesおよびselectedValuesの設定は、無視されます。
selectedIndexesおよびselectedValuesをsetProperty()やモデルバインディングによって変更しようとした場合、エラー(RCF11002)となります。
multiple=true(複数選択)の場合
selectedIndexesの値を設定した場合、そのほかのプロパティは以下のように値が変更されます。
selectedIndexesの値 | 変更後の値 | ||
|---|---|---|---|
selectedIndex | selectedValue | selectedValues | |
[](長さ0の配列) | -1 | ""(空文字列) | [](長さ0の配列) |
長さ1以上の配列 | selectedIndexesの末尾の要素 | selectedIndexesの末尾の要素で指定された選択項目のvalue | selectedIndexesで指定された選択項目のvalueを持った配列 |
selectedValuesの値を設定した場合、そのほかのプロパティは以下のように値が変更されます。
selectedValuesの値 | 変更後の値 | ||
|---|---|---|---|
selectedIndex | selectedIndexes | selectedValue | |
[](長さ0の配列) | -1 | [](長さ0の配列) | ""(空文字列) |
長さ1以上の配列 | selectedValuesの末尾のvalueを持つ選択項目のインデックス | selectedIndexesで指定されたvalueを持つ選択項目のインデックスの配列 | selectedValuesの末尾の要素 |
タグにselectedIndexesやselectedValuesの初期値が指定されていた場合も、上記のルールに従って動作します。ただし、selectedIndexesとselectedValuesが共に指定されていた場合は、selectedIndexesが優先されます。
タグに指定されたselectedIndexおよびselectedValueの設定は、無視されます。
selectedIndexおよびselectedValueをsetProperty()やモデルバインディングによって変更しようとした場合、エラー(RCF11002)となります。
スタイルプロパティ
パーツ名 | プレフィックス | クラス名 | 使用可能なスタイル |
|---|---|---|---|
部品全体 | なし | rcf-Select |
|
注) Internet Explorer 9 標準、Internet Explorer 10 標準、およびInternet Explorer 11 標準以外のInternet Explorerでは無効です。
詳細は、「2.9 スタイルプロパティ」を参照してください。
イベントリスナ
名前 | 説明 | イベントオブジェクト |
|---|---|---|
onFocus | 部品がフォーカスを得たときに呼ばれます。 | |
onBlur | 部品がフォーカスを失ったときに呼ばれます。 | |
onChange | 現在と異なる項目を選択し、マウスボタンを離したときに呼ばれます。 | |
onOptionSelected | 項目が選択されたときに呼ばれます。 | |
onOptionDeselected | 項目の選択が解除されたときに呼ばれます。 |
注) マウス、キーボードなどの入力装置によってUI部品を操作した場合に呼ばれるイベントリスナ
部品共通のイベントリスナもあります。詳細は、「2.8.2 画面部品共通イベントリスナ」を参照してください。
JavaScript API
固有のJavaScript APIはありません。部品共通のJavaScript APIは、「2.8.3 画面部品共通JavaScript API」を参照してください。
補足事項
Select部品でのイベントについて
以下の場合に、マウスイベントが通知されません。
Internet Explorer 10およびInternet Explorer 11の場合
単一選択の場合、dblclickイベントが通知されません。
Firefoxの場合
単一選択で選択候補のリストが表示されている場合、以下のマウスイベントが通知されません。
dblclickイベント
リスト表示ボタン上でのmousedownイベント
複数選択操作について
キーボード、マウスなどによる複数選択の操作方法は、各ブラウザの<select>要素の操作方法に準じます。
標準設定では、以下の方法で複数選択が可能です。
Internet Explorerの場合
選択の追加、解除
Ctrlキーを押しながら項目をクリック
範囲選択
Shiftキーを押しながら方向キーを押下
マウスのドラッグ
Firefoxの場合
選択の追加、解除
Ctrlキーを押しながら方向キーでフォーカスを移動し、スペースキーを押下
Ctrlキーを押しながら項目をクリック
範囲選択
Shiftキーを押しながら方向キーを押下
マウスのドラッグ