Velo 第３０回　ドロップダウンを使う

2023年9月17日 23:43

ドロップダウンはサイト訪問者の入力の負担を軽減する優れたインターフェースです。
またサイト作成者にとっても正確な入力が期待され、その分コードが軽くなります。
エレメントとしてノーコードでも多用されますが、選択肢をコレクションから登録したい、選択肢決定時のイベントホルダーを作りたい等、ダイナミックに使用する場合にはコーディングが必要になります。
ドロップダウンのプロパティは options、label、value、selectIndex、placeholder です。

options は選択肢の配列で、各選択肢は label と value をキーとするオブジェクトになっています。
ここで話がややこしくなっています。
エレメントのプロパティに label と value があるかと思えば options のプロパティにもlabel と value があります。

options は「ラベル (label)」と「値 (value)」で構成されています。
「値」は一意でないといけません。
ドロップダウンをページに追加して「選択肢を管理」をクリックすると、デフォルトで登録されている選択肢が分かります。
ポップアップに表示されている大字がラベル(label) 、小字が値(value) に相当します。デフォルトの多くはどちらも同じ値になっています。
この場合 options の最初のオブジェクトは {'label': 'Vanila', 'value': 'Vanila'} になっています。これらの選択肢はコーディングで不要な場合が多いのでポップアップから一つずつ削除します。
選択肢の色やデザインは鉛筆マークのポップアップから「デザインをカスタマイズ」をクリックして好みに合わせることができます。

options をオブジェクトの立場で見てみましょう。
以下のコードをご覧下さい。

// options を読みこむことができます
let dropdownOptions = $w("#myDropdown").options;
/* "label"と"value"をキーとする項目オブジェクトの配列になっています
dropdownOptions === [
  {"label": "Taro", "value": "0"},
  {"label": "Jiro", "value": "1"},
  {"label": "Sabro", "value": "2"}
];
*/

// options を設定することができます
$w("#myDropdown").options = [
  {"label": "Taro", "value": "0"},
  {"label": "Jiro", "value": "1"},
  {"label": "Sabro", "value": "2"}
];

一方、エレメントの label は下図のようにドロップダウンの見出しです。
意味が全く違います。
これは、$w('#myDropdown').label で読み書きができます。

またエレメントの value は下図のコードのように現在の選択肢の value です。
これは、$w('#myDropdown').valueで読み書きができます。
ドロップダウンに表示されているのは選択肢の label であって値ではありませんので注意が必要です。
以下のコードをご覧下さい。

let myValue = $w('#myDropdown').value; // 0

// 既存値をvalueに設定すると選択肢を変更できます
$w('myDropdown').value = 1;
// value = 1 のラベルが表示されます

// 存在しない値をvalueに設定しても選択肢は表示できません
$w('myDropdown').value = 10;
// プレースホルダーが表示されます

ドロップダウンの value に既存値以外の値を設定するとプレースホルダーが表示されますが、追加したドロップダウンによっては枠が赤に変色するものがあります。
またそうならないものもあります。

また、下図のトップに表示されているプレースホルダーは「設定」をクリックして現れるポップアップから変更することができます。
コードでプレースホルダーを変更しないなら、ここでスタティックに設定しておきます。

最後にドロップダウンの selectedIndex は現在の選択肢のインデックスです。
最初の選択肢が0になります。
選択肢のインデックス範囲以外の値を設定するとプレースホルダーが表示されます。
特に選択肢をリセットする方法として、$w('#myDropdown').selectedIndex = undefined は多用されます。

Velo開発のご依頼はこちら

この記事が気に入ったらサポートをしてみませんか？

Velo 第３０回 ドロップダウンを使う

Velo 第３０回　ドロップダウンを使う