フォームセレクト

カスタムスタイルを使用した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プロパティ

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は上記の配列を次の配列（オブジェクトの配列）形式に変換します

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プロパティを必ず指定する必要があります。

v2.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は上記のオブジェクトを次の配列（オブジェクトの配列）形式に変換します

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 }
]

注:オブジェクト形式を使用する場合、最終的な配列の順序は保証されません。このため、前述のいずれかの配列形式を使用することをお勧めします。

オプションフィールド名の変更

フィールドプロパティ名をカスタマイズする場合（たとえば、表示textにnameフィールドを使用する場合など）、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がchangeイベントを発生させないため、ユーザーは最初の項目を選択できなくなります。したがって、最初のオプションとして空の値を持つ無効なオプションを提供することをお勧めします。

<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より大きい値に設定されている場合、multipleプロパティも設定されていない限り、Bootstrap v4のカスタムスタイルは適用されません。

すべてのモバイルブラウザがセレクトをリストボックスとして表示するわけではないことに注意してください。

<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グリッド列内に配置します。

自動フォーカス

autofocusプロパティが<b-form-select>に設定されている場合、ドキュメントに挿入された（つまり、マウントされた）とき、またはVueの<keep-alive>コンポーネント内にある場合は再アクティブ化されたときに、セレクトが自動的にフォーカスされます。このプロパティは、セレクトにautofocus属性を設定するものではなく、セレクトが表示されるタイミングを認識することもできないことに注意してください。

コンテキスト状態

Bootstrapには、ほとんどのフォームコントロールのvalid状態とinvalid状態の検証スタイルが含まれています。

一般的に言えば、特定の種類のフィードバックには特定の状態を使用することをお勧めします

false（無効な状態を示す）は、ブロックされているフィールドまたは必須フィールドがある場合に最適です。ユーザーはフォームを送信するためにこのフィールドを適切に入力する必要があります。
true（有効な状態を示す）は、フォーム全体にフィールドごとの検証があり、残りのフィールドを通してユーザーを励ましたい場合に理想的です。
null検証状態を表示しません（有効でも無効でもない）

<b-form-select>にコンテキスト状態アイコンの1つを適用するには、stateプロパティをfalse（無効の場合）、true（有効の場合）、またはnull（検証状態なし）に設定します。

支援技術および色覚異常のユーザーへのコンテキスト検証状態の伝達

これらのコンテキスト状態を使用してフォームコントロールの状態を示すことは、視覚的で色に基づいた表示を提供するだけであり、スクリーンリーダーなどの支援技術のユーザーや色覚異常のユーザーには伝わりません。

状態の代替表示も必ず提供してください。例えば、フォームコントロールの<label>テキスト自体に状態に関するヒントを含めたり、追加のヘルプテキストブロック（<b-form-group>または<b-form-*-feedback>経由）を提供したりできます。特に支援技術向けには、無効なフォームコントロールにaria-invalid="true"属性を割り当てることもできます（下記参照）。

ARIA `aria-invalid`属性:

<b-form-select>が無効なコンテキスト状態（つまり、state = false）の場合、<b-form-select>のprop aria-invalidをtrueに設定することもできます。

サポートされているinvalidの値は次のとおりです。

false（デフォルト）エラーは検出されません
true値の検証に失敗しました。

stateがfalseに設定されている場合、aria-invalidもtrueに設定されます。

非カスタムセレクト

ネイティブブラウザの<select>をレンダリングするには、prop plainを設定します（ただし、クラス.form-controlは常にselectに配置されます）。

plainセレクトは、multipleではないセレクトで、select-size propが1より大きい値に設定されている場合は、常にレンダリングされます。

コンポーネントリファレンス

`<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`	`Boolean`または`String`	`false`	'aria-invalid'属性に設定するオプションの値。サポートされている値は'true'と'false'です。設定されていない場合、'state'propが値を決定します
`autofocus`	`Boolean`	`false`	`true`に設定すると、マウント時、またはキープアライブで再アクティブ化されたときに、コントロールに自動的にフォーカスを当てようとします。コントロールに`autofocus`属性を設定しません
`disabled`	`Boolean`	`false`	`true`に設定すると、コンポーネントの機能が無効になり、無効状態になります
`disabled-field`	`String`	`'disabled'`	`options`配列内で無効状態に使用されるべきフィールド名
`form`	`String`		フォームコントロールが属するフォームのID。コントロールに`form`属性を設定します
`html-field` 使用には注意が必要です	`String`	`'html'`	`options`配列内で、テキストフィールドの代わりにHTMLラベルに使用されるべきフィールド名
`id`	`String`		レンダリングされたコンテンツに`id`属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます
`label-field`	`String`	`'label'`	ラベルを取得するためにオプションオブジェクトから使用するキー
`multiple`	`Boolean`	`false`	設定すると、複数のオプションを選択できます（複数選択）
`name`	`String`		フォームコントロールの`name`属性の値を設定します
`options`	`Array`または`Object`	`[]`	コンポーネントでレンダリングするアイテムの配列
`options-field`	`String`	`'options'`	オプションを取得するためにオプションオブジェクトから使用するキー
`plain`	`Boolean`	`false`	フォームコントロールをカスタムスタイルモードではなく、プレーンモードでレンダリングします
`required`	`Boolean`	`false`	フォームコントロールに`required`属性を追加します
`select-size`	`Number`	`0`	0より大きい数値に設定すると、表示オプションの行数が設定されます。すべてのブラウザがこの設定を尊重するとは限りません
`size`	`String`		コンポーネントの外観のサイズを設定します。 'sm'、'md'（デフォルト）、または'lg'
`state`	`Boolean`	`null`	コンポーネントの検証状態の外観を制御します。 `true`は有効、`false`は無効、または`null`は検証状態なし
`text-field`	`String`	`'text'`	`options`配列内でテキストラベルに使用されるべきフィールド名
`value` v-model	`Any`		セレクトの現在の値。 'multiple'propが設定されている場合は、配列に設定する必要があります
`value-field`	`String`	`'value'`	`options`配列内で値に使用されるべきフィールド名

注意： HTML文字列をサポートするProps（*-html）は、生のユーザー提供値が渡された場合、クロスサイトスクリプティング（XSS）攻撃に対して脆弱になる可能性があります。最初にユーザー入力を適切にサニタイズする必要があります。

`v-model`

プロパティ	イベント
`value`	`input`

スロット

名前	説明
`default`	フォームセレクトに配置するコンテンツ
`first`	'options'propを介して提供されるオプションの上にオプションまたはオプショングループを配置するスロット

イベント

イベント	引数	説明
`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`	`Boolean`	`false`	`true`に設定すると、コンポーネントの機能が無効になり、無効状態になります
`value` 必須	`Any`		オプションの値

スロット

名前	説明
`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`	`String`	`'disabled'`	`options`配列内で無効状態に使用されるべきフィールド名
`html-field` 使用には注意が必要です	`String`	`'html'`	`options`配列内で、テキストフィールドの代わりにHTMLラベルに使用されるべきフィールド名
`label` 必須	`String`		オプショングループのラベル
`options`	`Array`または`Object`	`[]`	コンポーネントでレンダリングするアイテムの配列
`text-field`	`String`	`'text'`	`options`配列内でテキストラベルに使用されるべきフィールド名
`value-field`	`String`	`'value'`	`options`配列内で値に使用されるべきフィールド名

スロット

名前	説明
`default`	フォームセレクトオプショングループに配置するコンテンツ
`first`	'options'propを介して提供されるオプションの上にオプションを配置するスロット

個々のコンポーネントのインポート

以下の名前付きエクスポートを介して、個々のコンポーネントをプロジェクトにインポートできます

コンポーネント	名前付きエクスポート	インポートパス
`<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)

Optionsプロパティ

配列としてのオプション

オブジェクトの配列としてのオプション

オブジェクトとしてのオプション

オプションフィールド名の変更

オプションに関する注意点

標準（単一）セレクト

シングルモードの値

セレクトサイズ（表示行）

複数選択のサポート

複数モードの値

サイズ制御

自動フォーカス

コンテキスト状態

支援技術および色覚異常のユーザーへのコンテキスト検証状態の伝達

ARIA aria-invalid属性:

非カスタムセレクト

コンポーネントリファレンス

コンポーネントエイリアス

プロパティ

v-model

スロット

イベント

コンポーネントエイリアス

プロパティ

スロット

コンポーネントエイリアス

プロパティ

スロット

個々のコンポーネントのインポート

Vue.jsプラグインとしてのインポート

ARIA `aria-invalid`属性:

`v-model`