# Select

<div data-full-width="false"><figure><img src="https://3730302285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkKD42HpQdyU6pMEvZom%2Fuploads%2FQyR2x5DPaMvdaaHupUoz%2Fselect.webp?alt=media&#x26;token=5cefeba2-f98c-43fe-bf76-8a6861ac57b5" alt="Radio 介紹示意圖"><figcaption><p>Select 介紹示意圖</p></figcaption></figure></div>

Select 下拉選擇，用在讓使用者針對選取的資料做進一步的篩選，或是與選項按鈕一樣，選一個特定值。點擊按鈕會出現一個懸浮區域，裡面是一系列的選項，外觀與 Dropdown 相似，但與 Dropdown 最大的不同之處在於 Select 點擊選項後，值變成選項內容，並且關閉懸浮區域。

### 主題色 <a href="#theme" id="theme"></a>

```html
<bpa-select v-model="value" :options="options" theme="primary" />
```

### 大小 <a href="#size" id="size"></a>

```html
<bpa-select v-model="value" :options="options" size="small" />
```

### 提示文字 <a href="#placeholder" id="placeholder"></a>

```html
<bpa-select v-model="value" :options="options" placeholder="placeholder"/>
```

### 禁用 <a href="#disabled" id="disabled"></a>

```html
<bpa-select v-model="value" :options="options" disabled/>
```

### 隱藏清除按鈕 <a href="#disabled-clear" id="disabled-clear"></a>

```html
<bpa-select v-model="value" :options="options" disabledClear/>
```

### 前綴與後綴 <a href="#preffix-affix" id="preffix-affix"></a>

```html
<bpa-select v-model="value" :options="options">
  <template v-slot:prefix>prefix</template>
  <template v-slot:affix>affix</template>
</bpa-select>
```

### 如果外層有 position: fixed <a href="#fixed" id="fixed"></a>

為了不讓外層的 position 狀態影響下拉式選單彈出的位置，需要加上 fixed 修正。

```html
<bpa-select v-model="value" :options="options" fixed @click="onClick"/>
```

### 在 bpa-form-item 裡 <a href="#bpa-form-item" id="bpa-form-item"></a>

在表單項目 bpa-form-item 裡面使用時，需要一起做搭配。

```html
<bpa-form-item labelFor="bpa-select-{id}-btn">
    <bpa-select v-model="value" :options="options" :id="{id}" @click="onClick"/>
</bpa-form-item>
```

### 客製化下拉式選單彈出框的寬度 <a href="#width" id="width"></a>

```html
<bpa-select v-model="value" :options="options" optionWidth="100px" @click="onClick"/>
```

### 可多選模式 <a href="#multiple" id="multiple"></a>

```html
<!-- show all options -->
<bpa-select v-model="value" :options="options" multiple /> 

<!-- show first option, others using "n+" -->
<bpa-select v-model="value" :options="options" multiple="accordion" /> 
```

### 選項群組 <a href="#item-group" id="item-group"></a>

```json
{
  label: '第一群',
  type: 'group',
    options: [
      { label: 'label10', value: '10' },
      { label: 'label20', value: '20' },
      { label: 'label30', value: '30' }
    ]
  }
}
```

### 搜尋下拉式選單裡的選項 <a href="#search" id="search"></a>

```html
<bpa-select v-model="value" :options="options" multiple :toolbar="['search']"/>
```

{% hint style="info" %}
預設 0.8 秒後啟動 autocomplete 過濾選項，若要手動搜尋：使用 "@search"
{% endhint %}

### 屬性 <a href="#props" id="props"></a>

<table data-full-width="false"><thead><tr><th width="153">Name</th><th width="161">Value</th><th>Type</th><th>Default</th><th data-type="checkbox">Required</th><th>Note</th></tr></thead><tbody><tr><td>id</td><td></td><td>String</td><td>random</td><td>false</td><td></td></tr><tr><td>size</td><td>small,<br>large</td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>v-model</td><td></td><td>String</td><td></td><td>true</td><td></td></tr><tr><td>options</td><td></td><td>Array&#x3C;{ label: string, value: any }> | Array&#x3C;{ label: string, type: 'group', options: Option[] ></td><td></td><td>true</td><td></td></tr><tr><td>disabled</td><td></td><td>Boolean</td><td>false</td><td>false</td><td></td></tr><tr><td>disabledClear</td><td></td><td>Boolean</td><td>false</td><td>false</td><td>隱藏清除按鈕</td></tr><tr><td>placeholder</td><td></td><td>String</td><td>請選擇/select</td><td>false</td><td></td></tr><tr><td>theme</td><td><p>primary,</p><p>success,</p><p>warning, </p><p>danger, </p><p>primary-ghost, </p><p>success-ghost, </p><p>warning-ghost, </p><p>danger-ghost</p></td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>optionWidth</td><td></td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>fixed</td><td></td><td>Boolean</td><td>false</td><td>false</td><td></td></tr><tr><td>v-slot:prefix</td><td></td><td></td><td></td><td>false</td><td>提示文字的前方客製化區域</td></tr><tr><td>v-slot:affix</td><td></td><td></td><td></td><td>false</td><td>提示文字的前方客製化區域</td></tr><tr><td>toolbar</td><td></td><td>Array&#x3C;'search'></td><td></td><td>false</td><td>工具列，目前支援 搜尋 search 功能</td></tr><tr><td>multiple</td><td></td><td>'accordion' or undefined</td><td></td><td>false</td><td>多選，無需給值，若欲摺疊選項則給值 accordion</td></tr><tr><td>listboxClass</td><td></td><td>String</td><td></td><td>false</td><td>可以在 listbox 增加 classname</td></tr></tbody></table>

### 事件 <a href="#event" id="event"></a>

<table data-full-width="false"><thead><tr><th>Name</th><th>Paramaters</th><th>Description</th></tr></thead><tbody><tr><td>search</td><td>keyword</td><td>搜尋輸入值改變時</td></tr><tr><td>input</td><td></td><td></td></tr></tbody></table>

### Demo

{% embed url="<https://codesandbox.io/embed/0fpdp2?hidenavigation=1&module=/src/app.vue&view=Editor+++Preview>" fullWidth="false" %}


---

# 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://bpio.gitbook.io/piman/vue2/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.