# Select

Selectは主にフォームの送信や表示の際に使う選択用のコンポーネントです。Dashcombが提供しているSelectboxは、通常のHTMLのSelectboxをベースにしています。なので、管理画面の用途に合わせて、簡単なバリデーション機能を内蔵しています。

バリデーション機能は入力必須（単一選択の場合）、最小選択数や最大選択数（複数選択の場合）を含みます。

## プロパティ

Selectコンポーネントには、以下のプロパティが含まれています。

<figure><img src="/files/2Uyy8fvksV5MfaFIZStA" alt=""><figcaption></figcaption></figure>

### 共通 <a href="#common" id="common"></a>

#### **オブジェクト**

Selectオブジェクトの変数名です。Selectコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に `select1`、`select2`... と名付けられます。

ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。

（例）`{{select1.value}}` で `select1` の表示状態の真偽値を取得することができます。

利用できるオブジェクトとプロパティは、[インスペクターメニュー](/dashcomb-help-center/ide/region/inspector-region.md) で確認できます。

#### 非表示

トグルスイッチをONにすると、セレクトが非表示になります。

#### 無効

トグルスイッチをONにすると、セレクトが無効になります。

**入力必須**

トグルスイッチをONにすると、セレクトが入力必須になります。

### データ <a href="#data" id="data"></a>

#### ラベル文字

セレクトの項目名を表すラベルテキストです。Selectコンポーネントをドラッグ＆ドロップすると、ラベル文字が自動的に `Select` に設定されます。

`Select` を任意の文字列に入れ替えることはもちろん、構文 `{{オブジェクト名.プロパティ}}` を入れることにより、動的に設定することができます。

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](/dashcomb-help-center/ide/obujekutoyadtano.md) のページを参照してください。
{% endhint %}

#### 入力ヒント

セレクトのプレースホルダーです。セレクトに何も入力されていない場合に、入力例として表示されます。

通常のhtmlのSelectbox要素のplaceholder属性に該当します。

現在の設定値は、`{{オブジェクト名.placeholder}}` で参照できます。

#### デフォルト値

セレクトの初期値です。画面を開いた時点で、value 属性に自動的に設定される値を指定します。初期値は `value1` で、変数 `select.value` の値は `value1`になります。

`{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。

（例）オブジェクト `select2` のデフォルト値に `{{select1.value}}` を入力することによって、`select1` に入力した内容がリアルタイムで `select2` に反映することができます。

現在の設定値は、`{{オブジェクト名.defaultValue}}` で参照できます。

**オプション**

選択肢の詳細な設定を変更できます。Selectのオプションの初期値は下記のようなJSON式の配列になっています。

```json
[
  { "label": "option1", "value": "value1" },
  { "label": "option2", "value": "value2" },
  { "label": "option3", "value": "value3" }
]
```

上記のように値を固定的する設定以外にも、 `{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。

（例）オブジェクト `select2` のオプションに `{{select1.options}}` を入力することによって、`select1` のオプションがリアルタイムで `select2` に反映することができます。

#### 複数選択

トグルスイッチをONにすると、セレクトボックスの複数選択が可能になります。初期はOFFで、単一選択状態です。

ONにして、`option1`、`option2` を選択すると、変数 `select.value` の値は `["value1","value2"]`という文字列の配列になります。

**最小選択数**

選択肢の数の下限です。

**最大選択数**

選択肢の数の上限です。

上記のように値を固定的する設定以外にも、 `${オブジェクト名.プロパティ}` 構文を用いて、動的に設定することができます。

### アクション

Select コンポーネントのアクションは、以下を設定することができます。

#### **onChange**

セレクトボックスのonChange イベントの発生時（Selectの入力内容が変更された時）に、指定アクションを実行できます。

**onForcus**

セレクトボックスのonForcus イベントの発生時（Selectがフォーカス状態になった時）に、指定アクションを実行できます。

**onBlur**

セレクトボックスのonBlur イベントの発生時（Selectがフォーカス状態でなくなった時）に、指定アクションを実行できます。

### 外観

#### **ラベル表示**

セレクトボックスラベルの表示・非表示を切り替えます。

トグルスイッチをOFFにすると、セレクトボックスラベルが表示されなくなりますが、セレクトボックス本体に影響はありません。

以下の項目で表示を調整できます。

<table><thead><tr><th width="133">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>ラベル整列</td><td>ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。</td><td></td></tr><tr><td>ラベル位置</td><td>ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。</td><td></td></tr><tr><td>ラベル横幅</td><td>ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。</td><td></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/select.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.