Skip to main content

selectOptions

selectOptions は、セレクトボックスやマルチチェックボックスなどの選択肢に変換するための関数です。 類似のヘルパ関数にselectOptionStrings とselectOptionNumbers があります。そちらも参照してください。

シグネチャ​

selectOptions(options, optionValueKey?, optionLabelKey?): SelectOptions

引数​

引数名必須型説明
options〇any[]セレクトボックスの選択肢の配列を指定します。
optionValueKeystring各選択肢の値を示すキーを指定します。デフォルトは "value" です。
optionLabelKeystring各選択肢のラベルを示すキーを指定します。デフォルトは "label" です。

返り値​

選択肢の配列とキー情報を保持した SelectOptions クラスのインスタンスを返します。

使用例​

const countries = [
  { value: "jp", label: "日本" },
  { value: "us", label: "アメリカ" },
  { value: "uk", label: "イギリス" },
];

const users = [
  { id: "jp", name: "Alice", isAdmin: true },
  { id: "jp", name: "Bob", isAdmin: false },
  { id: "jp", name: "Charlie", isAdmin: false },
];

useCsView({
  country: useCsSelectBoxItem(
    "国",
    useInit(),
    stringRule(true),
    selectOptions(countries), // 第2、第3引数はデフォルトではvalueとlabelのため省略
    RW.Editable,
    "国を選択してください"
  ),
  assignee: useCsSelectBoxItem(
    "担当者",
    useInit(),
    stringRule(true),
    selectOptions(users, "id", "name"), // 第2、第3引数でidとnameを指定
    RW.Editable,
    "担当者を選択してください"
  ),
});