# Select

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

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

## プロパティ

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

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-378aa70f6d53be28951ae2a9e70048e8f815be08%2FUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%9A%E3%82%BB%E3%83%AC%E3%82%AF%E3%83%88%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

#### 非表示

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

#### 無効

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

**入力必須**

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

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

#### ラベル文字

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

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

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](https://docs.dashcomb.com/dashcomb-help-center/ide/obujekutoyadtano) のページを参照してください。
{% 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>