表單選取

Bootstrap 自訂 <select> 使用自訂樣式。可根據陣列、物件陣列或物件選擇選項。

通過將陣列或物件傳遞給 options 道具來產生您的選項

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <b-form-select v-model="selected" :options="options" size="sm" class="mt-3"></b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select an option' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Selected Option' },
          { value: { C: '3PO' }, text: 'This is an option with object value' },
          { value: 'd', text: 'This one is disabled', disabled: true }
        ]
      }
    }
  }
</script>

<!-- b-form-select-options.vue -->

你甚至可以透過 options 道具來定義選項群組

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select an option' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Selected Option', disabled: true },
          {
            label: 'Grouped options',
            options: [
              { value: { C: '3PO' }, text: 'Option with object value' },
              { value: { R: '2D2' }, text: 'Another option with object value' }
            ]
          }
        ]
      }
    }
  }
</script>

<!-- b-form-select-options.vue -->

或者手動提供您的選項和選項群組

<template>
  <div>
    <b-form-select v-model="selected" class="mb-3">
      <b-form-select-option :value="null">Please select an option</b-form-select-option>
      <b-form-select-option value="a">Option A</b-form-select-option>
      <b-form-select-option value="b" disabled>Option B (disabled)</b-form-select-option>
      <b-form-select-option-group label="Grouped options">
        <b-form-select-option :value="{ C: '3PO' }">Option with object value</b-form-select-option>
        <b-form-select-option :value="{ R: '2D2' }">Another option with object value</b-form-select-option>
      </b-form-select-option-group>
    </b-form-select>

    <div class="mt-2">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null
      }
    }
  }
</script>

<!-- b-form-select-manual.vue -->

不要猶豫，透過 options 道具來將 <b-form-select-option> 和 <b-form-select-option-group> 混合使用。手動放置的選項和選項群組會出現在通過 options 道具產生的選項之下。要將手動選項和選項群組置於由 options 道具指定的選項上方，請使用名稱槽 first。

<template>
  <div>
    <b-form-select v-model="selected" :options="options" class="mb-3">
      <!-- This slot appears above the options from 'options' prop -->
      <template #first>
        <b-form-select-option :value="null" disabled>-- Please select an option --</b-form-select-option>
      </template>

      <!-- These options will appear after the ones from 'options' prop -->
      <b-form-select-option value="C">Option C</b-form-select-option>
      <b-form-select-option value="D">Option D</b-form-select-option>
    </b-form-select>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: 'A', text: 'Option A (from options prop)' },
          { value: 'B', text: 'Option B (from options prop)' }
        ]
      }
    }
  }
</script>

<!-- b-form-select-both.vue -->

選項屬性

options 可以是字串或物件陣列，也可以是關鍵字值物件。可用欄位

value 將在 v-model 上設定的選取值
disabled 停用項目供選取
text 顯示文字，或html 顯示基本內嵌 HTML

value 可以是字串、數字或簡單物件。請避免在值中使用複雜的型態。

如果同時提供 html 和 text，將以 html 為準。在 html 欄位中僅支援基本或原生 HTML（元件將無法運作）。請注意，並非所有瀏覽器都會在 <select> 的 <option> 元素中顯示內嵌 HTML（例如 <i>、<strong> 等）。

請小心將使用者提供內容放到 html 欄位，此做法可能會讓你容易遭受 XSS 攻擊，如果你沒有先整理使用者提供的字串。

選項作為陣列

const options = ['A', 'B', 'C', { text: 'D', value: { d: 1 }, disabled: true }, 'E', 'F']

如果陣列中的項目是字串，將在同時用於 value 和 text 欄位中。

你可以在陣列中混合使用字串和物件。

BootstrapVue 內部將 above 陣列轉換為以下陣列（物件陣列）格式

const options = [
  { text: 'A', value: 'A', disabled: false },
  { text: 'B', value: 'B', disabled: false },
  { text: 'C', value: 'C', disabled: false },
  { text: 'D', value: { d: 1 }, disabled: true },
  { text: 'E', value: 'E', disabled: false },
  { text: 'F', value: 'F', disabled: false }
]

選項作為物件陣列

const options = [
  { text: 'Item 1', value: 'first' },
  { text: 'Item 2', value: 'second' },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4' },
  { text: 'Item 5', value: { foo: 'bar', baz: true } }
]

如果 value 不存在，將同時使用 text 作為 value 和 text 欄位。如果你使用 html 屬性，你必須提供 value 屬性。

2.2.0 新功能若要定義選項群組，請新增具有 label 屬性（做為群組名稱）和 options 屬性（設為群組內的選項陣列）的物件。

const options = [
  { text: 'Item 1', value: 'first' },
  { text: 'Item 2', value: 'second' },
  {
    label: 'Grouped options',
    options: [{ html: '<b>Item</b> 3', value: 'third', disabled: true }, { text: 'Item 4' }]
  },
  { text: 'Item 5', value: { foo: 'bar', baz: true } }
]

選項作為物件

已棄用

鍵對應到 value，值對應到選項 text。

const options = {
  a: 'Item A',
  b: 'Item B',
  c: { html: 'Item C', disabled: true },
  d: { text: 'Item D', value: 'overridden_value' },
  e: { text: 'Item E', value: { foo: 'bar', baz: true } }
}

BootstrapVue 內部將 above 物件轉換為以下陣列（物件陣列）格式

const options = [
  { text: 'Item A', value: 'a', disabled: false },
  { text: 'Item B', value: 'b', disabled: false },
  { html: 'Item C', value: 'c', disabled: false },
  { text: 'Item D', value: 'overridden_value', disabled: true },
  { text: 'Item E', value: { foo: 'bar', baz: true }, disabled: false }
]

註解：使用物件格式時，最終陣列的順序並非有保證的。因此，建議使用先前提到的任意一種陣列格式。

變更選項欄位名稱

如果您想要自訂欄位屬性名稱（例如使用 name 欄位來顯示 text），可以透過設定 text-field、html-field、value-field 和 disabled-field 屬性為包含您想要使用的屬性名稱的字串，即可輕鬆變更這些屬性。

<template>
  <div>
    <b-form-select
      v-model="selected"
      :options="options"
      class="mb-3"
      value-field="item"
      text-field="name"
      disabled-field="notEnabled"
    ></b-form-select>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'A',
        options: [
          { item: 'A', name: 'Option A' },
          { item: 'B', name: 'Option B' },
          { item: 'D', name: 'Option C', notEnabled: true },
          { item: { d: 1 }, name: 'Option D' }
        ]
      }
    }
  }
</script>

<!-- b-form-select-options-fields.vue -->

選項註解

如果您的 v-model 表達式的初始值與任何選項都不符合，<b-form-select> 元件（其本質上是原生的 HTML5 <select>）將會呈現為未選取的狀態。在 iOS 作業系統中，這將導致使用者無法選取第一個項目，因為在這種情況下 iOS 作業系統並未觸發變更事件。因此建議提供一個停用的選項，並將其值設為空值，作為第一個選項。

<b-form-select v-model="selected" :options="options">
  <template #first>
    <b-form-select-option value="" disabled>-- Please select an option --</b-form-select-option>
  </template>
</b-form-select>

請參閱 Vue select 文件，以取得更詳細的資料。

標準（單一）選取

預設情況下，套用 Bootstrap v4 的自訂選取樣式。

單一模式中的值

在非 multiple 模式中，<b-form-select> 會傳回目前選取選項的單一 value

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select some item' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Default Selected Option' },
          { value: 'c', text: 'This is another option' },
          { value: 'd', text: 'This one is disabled', disabled: true }
        ]
      }
    }
  }
</script>

<!-- b-form-select-single.vue -->

選取大小（顯示列）

您可以使用 select-size 屬性，將自訂選取切換成下拉方塊，而非下拉選單。將 select-size 屬性設定為大於 1 的數字值，以控制要顯示選項的行數。

注意，當 select-size 設定為大於 1 的值時，不會套用 Bootstrap v4 的自訂樣式，除非 multiple 屬性也設定為已設定。

請注意，並非所有行動裝置瀏覽器都會將選取顯示為下拉方塊。

<template>
  <div>
    <b-form-select v-model="selected" :options="options" :select-size="4"></b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select some item' },
          { value: 'a', text: 'This is option a' },
          { value: 'b', text: 'Default Selected Option b' },
          { value: 'c', text: 'This is option c' },
          { value: 'd', text: 'This one is disabled', disabled: true },
          { value: 'e', text: 'This is option e' },
          { value: 'e', text: 'This is option f' }
        ]
      }
    }
  }
</script>

<!-- b-form-select-size.vue -->

多重選取支援

藉由設定道具 multiple 開啟多選模式，並透過設定 select-size 為要顯示的列數，來控制多選方塊清單中顯示的列數。預設值為讓瀏覽器使用其預設值（通常為 4）。

多選模式中的值

在 multiple 模式中，<b-form-select> 總是傳回選項值陣列。在 multiple 模式時，**必須** 提供陣列參照作為 v-model。

<template>
  <div>
    <b-form-select v-model="selected" :options="options" multiple :select-size="4"></b-form-select>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: ['b'], // Array reference
        options: [
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Default Selected Option' },
          { value: 'c', text: 'This is another option' },
          { value: 'd', text: 'This one is disabled', disabled: true },
          { value: 'e', text: 'This is option e' },
          { value: 'f', text: 'This is option f' },
          { value: 'g', text: 'This is option g' }
        ]
      }
    }
  }
</script>

<!-- b-form-select-multiple-mode.vue -->

控制大小

使用 size 道具將表單控制項文字大小設定為 sm 或 lg，分別表示小或大。

預設情況下 <b-form-select> 會佔據它所顯示的容器的全部寬度。若要控制選取寬度，請將輸入欄位置於標準的 Bootstrap 格狀欄中。

自動對焦

當對 <b-form-select> 設定 autofocus 道具時，將在選取插入（亦即**掛載**）文件或在 Vue <keep-alive> 元件中重新啟動時，將其自動對焦。請注意，此道具**並未**設定選取中的 autofocus 屬性，且也無法得知選取何時會變得可見。

情境狀態

Bootstrap 在大多數表單控制項上，包含 valid 和 invalid 狀態的驗證樣式。

一般來說，您會想對特定類型的回饋使用特定的狀態。

false（表示無效狀態）適合於有封鎖或必填欄位時。使用者必須正確填入此欄位，才能提交表單。
true（表示有效狀態）適合於整個表單中有逐欄位驗證，且希望引導使用者完成其他欄位的情況。
null 顯示無驗證狀態（既非有效亦非無效）。

若要在 <b-form-select> 上套用其中一個情境狀態圖示，請將 state 道具設定為 false（無效）、true（有效）或 null（無驗證狀態）。

將情境驗證狀態傳達給輔助技術和色盲使用者

使用這些情境狀態來表示表單控制項的狀態，僅會提供視覺指示的彩色基礎，這無法傳遞給輔助科技的使用者（例如：螢幕朗讀程式），或色盲的使用者。

請確保也提供另一種狀態指示方式。舉例來說，你可以將狀態提示包含在表單控制項的 <label> 文字本身，或是透過提供額外的說明文字區塊（例如：<b-form-group> 或 <b-form-*-feedback>）。特別針對輔助科技，無效的表單控制項也可以指派 aria-invalid="true" 屬性（請見下方說明）。

ARIA `aria-invalid` 屬性：

當 <b-form-select> 有無效的情境狀態（例如：狀態 = false）時，你可能也想將 <b-form-select> 屬性 aria-invalid 設定為 true。

支援的 invalid 值有：

false（預設值）偵測不到錯誤
true 這個值未通過驗證。

當 state 設定為 false 時，aria-invalid 也會設定為 true。

非自訂選單

設定屬性 plain 以呈現實體瀏覽器的 <select> 呈現（雖然類別 .form-control 仍會始終放在選單中）。

對於沒有 multiple 的選單，如果 select-size 屬性設定為大於 1 的值，將始終呈現 plain 選單。

元件參考

`<b-form-select>`

檢視原始碼

<b-form-select> 元件別名
<b-form-select> 屬性
<b-form-select> v-model
<b-form-select> 區塊
<b-form-select> 事件

元件別名

<b-form-select> 也可以透過下列別名使用

<b-select>

注意：只有在導入所有 BootstrapVue 或使用元件群組外掛程式時，元件別名才可用。

特性

所有特性的預設值皆可全球設定。

特性 (按一下依序排列)	類型 (按一下依序排列)	預設值	說明
`aria-invalid`	`布林值`或`字串`	`false`	設定「aria-invalid」屬性的選用值。支援的值為「true」和「false」。如未設定，會由「state」屬性決定值
`autofocus`	`布林值`	`false`	設定為 `true` 會嘗試在掛載時自動將焦點移至控制項，或在保持作用中重新啟用時自動將焦點移至控制項。不會在控制項中設定 `autofocus` 屬性
`disabled`	`布林值`	`false`	設定為 `true` 會停用元件功能並停用狀態
`disabled-field`	`字串`	`'disabled'`	應在 `options` 陣列中用於停用狀態的欄位名稱
`form`	`字串`		表單的 ID，表單控制項屬於該表單。在控制項中設定 `form` 屬性
`html-field` 謹慎使用	`字串`	`'html'`	應在 `options` 陣列中用於 HTML 標籤而非文字欄位的欄位名稱
`id`	`字串`		用於設定已呈現內容的 `id` 屬性，並用於在需要時作為產生任何其他元素 ID 的基礎
`label-field`	`字串`	`'label'`	用於從選項物件取得標籤的關鍵字
`multiple`	`布林值`	`false`	設定後允許多個選項選取（多選取）
`name`	`字串`		設定表單控制項中 `name` 屬性的值
`options`	`陣列`或`物件`	`[]`	元件中要呈現的項目陣列
`options-field`	`字串`	`'options'`	用於從選項物件取得選項的關鍵字
`plain`	`布林值`	`false`	以純文字模式呈現表單控制項，而非自訂樣式模式
`required`	`布林值`	`false`	將 `required` 屬性新增至表單控制項
`select-size`	`數字`	`0`	設定為大於 0 的數字時，會設定顯示選項列數。注意：並非所有瀏覽器都支援此設定
`size`	`字串`		設定元件外觀大小。'sm'、'md'（預設值）或 'lg'
`state`	`布林值`	`null`	控制元件驗證狀態外觀。`true` 表示有效，`false` 表示無效，或 `null` 表示無驗證狀態
`text-field`	`字串`	`'text'`	應在 `options` 陣列中用於文字標籤的欄位名稱
`value` v-model	`任何`		下拉選單的目前值。當設定「多重」屬性時，應設定為陣列
`value-field`	`字串`	`「value」`	`options` 陣列中應使用於值的欄位名稱

注意：支援 HTML 字串的屬性 (*-html) 在傳入未處理的使用者提供值時，可能會發生跨網站指令碼 (XSS) 攻擊。您必須先適當地清理使用者輸入資料！

`v-model`

特性	事件
`value`	`input`

插槽

名稱	說明
`default`	放入下拉選單的內容
`first`	在「options」屬性提供的選項上方放置選項或選項群組的插槽

事件

事件	引數	說明
`change`	`value` - 下拉選單目前選取的值	在使用者互動之下，下拉選單值改變時發出
`input`	`value` - 下拉選單目前選取的值	下拉選單值改變時發出

`<b-form-select-option>`

v2.2.0+ 功能性元件

檢視原始碼

<b-form-select-option> 元件別名
<b-form-select-option> 屬性
<b-form-select-option> 插槽

元件別名

<b-form-select-option> 也可透過下列別名使用

<b-select-option>

注意：只有在導入所有 BootstrapVue 或使用元件群組外掛程式時，元件別名才可用。

屬性

所有特性的預設值皆可全球設定。

特性	類型	預設值	說明
`disabled`	`布林值`	`false`	設定為 `true` 會停用元件功能並停用狀態
`value` 必要	`任何`		選項的值

插槽

名稱	說明
`default`	放入下拉選單選項的內容

`<b-form-select-option-group>`

v2.2.0+

檢視原始碼

<b-form-select-option-group> 組件別名
<b-form-select-option-group> 屬性
<b-form-select-option-group> 區塊

組件別名

<b-form-select-option-group> 也可以透過以下別名使用

<b-select-option-group>

注意：只有在導入所有 BootstrapVue 或使用元件群組外掛程式時，元件別名才可用。

屬性

所有特性的預設值皆可全球設定。

特性	類型	預設值	說明
`disabled-field`	`字串`	`'disabled'`	應在 `options` 陣列中用於停用狀態的欄位名稱
`html-field` 謹慎使用	`字串`	`'html'`	應在 `options` 陣列中用於 HTML 標籤而非文字欄位的欄位名稱
`標籤` 必要	`字串`		選項群組的標籤
`options`	`陣列`或`物件`	`[]`	元件中要呈現的項目陣列
`text-field`	`字串`	`'text'`	應在 `options` 陣列中用於文字標籤的欄位名稱
`value-field`	`字串`	`「value」`	`options` 陣列中應使用於值的欄位名稱

注意：支援 HTML 字串的屬性 (*-html) 在傳入未處理的使用者提供值時，可能會發生跨網站指令碼 (XSS) 攻擊。您必須先適當地清理使用者輸入資料！

區塊

名稱	說明
`default`	要放入表單選項群組的內容
`first`	要將選項置於透過「選項」屬性提供的選項上方的區塊

匯入個別元件

你可以透過以下命名匯出，將個別元件匯入到專案

元件	命名匯出	匯入路徑
`<b-form-select>`	`BFormSelect`	`bootstrap-vue`
`<b-form-select-option>`	`BFormSelectOption`	`bootstrap-vue`
`<b-form-select-option-group>`	`BFormSelectOptionGroup`	`bootstrap-vue`

範例

import { BFormSelect } from 'bootstrap-vue'
Vue.component('b-form-select', BFormSelect)

作為 Vue.js 外掛匯入

此外掛包含上述列出的所有個人元件. 外掛也會包含任何組件別名。

命名匯出	匯入路徑
`FormSelectPlugin`	`bootstrap-vue`

範例

import { FormSelectPlugin } from 'bootstrap-vue'
Vue.use(FormSelectPlugin)

選項屬性

選項作為陣列

選項作為物件陣列

選項作為物件

變更選項欄位名稱

選項註解

標準（單一）選取

單一模式中的值

選取大小（顯示列）

多重選取支援

多選模式中的值

控制大小

自動對焦

情境狀態

將情境驗證狀態傳達給輔助技術和色盲使用者

ARIA aria-invalid 屬性：

非自訂選單

元件參考

元件別名

特性

v-model

插槽

事件

元件別名

屬性

插槽

組件別名

屬性

區塊

匯入個別元件

作為 Vue.js 外掛匯入

ARIA `aria-invalid` 屬性：

`v-model`