> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 単一選択

> YiDAのSelectコンポーネントの機能と使い方を解説します。レイアウト、カスタム選択肢、関連選択肢の設定、選択解除、選択肢タイプ、色表示、一括編集など、フォーム設計に必要な設定方法を紹介します。

Selectコンポーネントを使用すると、ユーザーは限られた関連選択肢の中から1つを選べます。性別や活動タイプの選択などに利用します。

<Warning>
  Selectコンポーネントの選択肢の値は、最大255文字までです。
</Warning>

## レイアウト

選択肢は横並びまたは縦並びで配置できます。

## カスタム選択肢

表示値と選択肢の値は、それぞれ独立してカスタマイズできます。

* 表示値：フォームページ上でユーザーに表示されるテキストです。
* 選択肢の値：データ連動のフィルター検索で照合に使用される値です。デフォルトでは表示値と一致しますが、独立して設定することもできます。

## 関連選択肢の設定 - フィールドの表示制御

選択された選択肢に応じてコンテンツを表示したい場合は、関連選択肢を使用します。契約管理、物品請求、調達などのシナリオで有効です。

## 選択解除のサポート

選択解除機能を有効にすると、ユーザーは選択済みの選択肢を再度クリックして選択を解除できます。

以下の動画は、オンとオフの状態の違いを示しています。

## 選択肢タイプ

Selectコンポーネントは、4種類の選択肢タイプに対応しています。

* カスタム：ご自身の要件に合わせて選択肢の内容を定義します。
* 他のフォームデータを関連付ける：関連の設定を使用し、リンクされたフォームからデータを取得して現在のフォームのデータとして使用します。
* データ連動：フォーム内のあるフィールドのデータが変更されると、別のフィールドのデータもそれに応じて変更されます。通常、コンポーネントのデフォルト値を設定するために使用します。
* ゲートウェイデータ：APIエンドポイントは公開アクセス可能である必要があり、レスポンス形式は `[{"text":"111","value":"111"}]` である必要があります。

## 色

Select、複数選択、ドロップダウン単一選択、ドロップダウン複数選択の各コンポーネントは、いずれもカラーボタンに対応しています。有効にすると各選択肢が異なる色で表示され、色はカスタマイズできます。

## 「その他」を追加

選択肢が確定していない場合は、「その他を追加」機能を有効にしてください。これにより、リストに該当する選択肢がない場合でも、ユーザーは「その他」を選択して独自の内容を入力できます。

## 一括編集

Select、複数選択、ドロップダウン単一選択、ドロップダウン複数選択の各コンポーネントでカスタム選択肢を管理する際は、一括編集機能で変更できます。

| **機能エントリ** | **編集画面** |
| ---------- | -------- |
|            |          |

* 表示値のみを編集：YiDAの選択肢はカスタム選択肢の値と表示値を別々に設定できるため、一括編集はさまざまなニーズに合わせて複数のフォーマットに対応しています。用途に応じて適切なフォーマットを選択してください。

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
選択肢1
選択肢2
選択肢3
```

* 表示値と選択肢の値を同時に編集：各選択肢の表示値と選択肢の値が同一になります。

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
選択肢1 | A
選択肢2 | B
選択肢3 | C
```

* 国際化ラベル：この場合、A、B、Cが各選択肢の値になります。

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
i18n-xxx | A
i18n-xxx | B
i18n-xxx | C
```

国際化ラベルは一元管理が必要であり、編集フォーマットが過度に複雑化することを避けるため、この表示値タイプでは一括編集に対応していません。

<Note>
  区切り文字は、半角英数入力モードで入力するパイプ文字 `|` です。
</Note>

## FAQ

Q：複数の選択肢を持つSelectコンポーネントで、ユーザーが「その他」を選択したときに内容を入力できるようにしたいのですが、関連選択肢を使用せず（追加のコンポーネント設定が必要になるため）、単一のコンポーネント内で完結させたい場合、コードで実現できますか。または、他のコンポーネントでこのシナリオに対応できますか。

A：はい、コードで実現可能です。onChangeイベントをバインドし、テキスト入力コンポーネントのコンポーネント状態を動的に制御してください。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onChange({ value }) {
  if (value == "其他") {  // その他
    this.$('numberField_krbd7ly0').setBehavior('NORMAL') // 表示/非表示を制御するコンポーネントの一意識別子
  } else {
    this.$('numberField_krbd7ly0').setBehavior('HIDDEN')
  }
}
```