Bootstrap Select

Bootstrap material select is a form control which after a click displays a collapsable list of multiple values which can be used in forms, menus or surveys.

MDB provides you a variety of options and variations.


Basic example MDB Pro component

                
<template>
  <div>
    <select-wrapper>
      <select-input @click.native="openSelect(0)" :text="text[0]"></select-input>
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave">
        <select-options v-show="active[0]" class="collapse-item">
          <select-option disabled>Choose your option</select-option>
          <select-option @click.native="chooseOption" value="Option 1">Option nr 1</select-option>
          <select-option @click.native="chooseOption" value="Option 2">Option nr 2</select-option>
          <select-option @click.native="chooseOption" value="Option 3">Option nr 3</select-option>
          <select-option @click.native="chooseOption" value="Option 4">Option nr 4</select-option>
          <select-option @click.native="chooseOption" value="Option 5">Option nr 5</select-option>
        </select-options>
      </transition>
    </select-wrapper>
    <label>Example label</label>
  </div>
</template>

<script>
import { SelectWrapper, SelectInput, SelectOptions, SelectOption, Btn } from 'mdbvue';

export default {
  data() {
    return {
      value: {
        0: false
      },
      text: {
        0: "Choose your option"
      },
      active: {
        0: false
      },
      activeSelect: false,
      elHeight: false,
      multiValues: [],
      multiTexts: []
    };
  },
  name: 'SelectPage',
  components: {
    SelectWrapper,
    SelectInput,
    SelectOptions,
    SelectOption,
    Btn
  },
  methods: {
    openSelect(index) {
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        if (index !== i) {
          this.active[i] = false;
        }
      }
      this.active[index] = true;
      this.activeSelect = index;
    },
    chooseOption(e) {
      // check if select is multiple
      if (e.target.dataset.multiple === 'true') {
        if (this.multiValues.includes(e.target.getAttribute('data-value'))) {
          let valueIndex = this.multiValues.indexOf(e.target.getAttribute('data-value'));
          this.multiValues.splice(valueIndex, 1);
          this.multiTexts.splice(valueIndex, 1);
          e.target.parentNode.classList.remove('active');
          e.target.parentNode.getElementsByTagName('input')[0].removeAttribute('checked');
          if (!this.multiValues.length) {
            this.multiValues = [];
            this.multiTexts = "Choose Your options";
          }
        } else {
          if (this.multiTexts === "Choose Your options") {
            this.multiValues = [];
            this.multiTexts = [];
          }
          this.multiValues.push(e.target.getAttribute('data-value'));
          this.multiTexts.push(e.target.parentNode.getElementsByClassName('filtrable')[0].textContent);
          e.target.parentNode.classList.add('active');
          e.target.parentNode.getElementsByTagName('input')[0].setAttribute('checked', true);
        }
        this.value[this.activeSelect] = this.multiValues;
        this.text[this.activeSelect] = this.multiTexts;
      // if not multiple
      } else {
        let activeOption = e.target.parentNode.parentNode.getElementsByClassName('active')[0];
        if (activeOption) {
          activeOption.classList.remove('active');
        }
        e.target.parentNode.classList.add('active');
        this.value[this.activeSelect] = e.target.getAttribute('data-value');
        this.text[this.activeSelect] = e.target.parentNode.getElementsByClassName('filtrable')[0].textContent;
      }
    },
    beforeEnter(el) {
      el.style.display = 'block';
      this.elHeight = el.scrollHeight;
    },
    enter(el) {
      el.style.display = 'block';
      el.style.opacity = 1;
      el.style.height = this.elHeight + 'px';
    },
    afterEnter(el) {
      el.style.overflowY = 'auto';
    },
    beforeLeave(el) {
      el.style.overflowY = 'hidden';
      el.style.opacity = 0;
      el.style.height = 0;
      this.remove = setTimeout(() => {
        el.style.display = 'none';
      }, 500);
    },
    allDropdownsClose(target) {
      // check if target is multiple select
      if (target) {
        if (target.dataset.multiple === 'true') {
          return;
        }
      }
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        this.active[i] = false;
      }
    },
    onClick(e) {
      if (!e.target.classList.contains('select-dropdown')) {
        this.allDropdownsClose(e.target);
      }
    }
  },
  mounted() {
    document.addEventListener('click', this.onClick);
  },
  destroyed() {
    document.removeEventListener('click', this.onClick);
  }
};
</script>

<style scoped>
.collapse-item {
  overflow: hidden;
  opacity: 0;
  height: 0;
  transition: .5s;
}
</style>
                
            

Color variations MDB Pro component

                
<template>
  <div>
    <select-wrapper color="primary">
      <select-input @click.native="openSelect(1)" :text="text[1]"></select-input>
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave">
        <select-options v-show="active[1]" class="collapse-item">
          <select-option disabled>Choose your option</select-option>
          <select-option @click.native="chooseOption" value="Option 1">Option nr 1</select-option>
          <select-option @click.native="chooseOption" value="Option 2">Option nr 2</select-option>
          <select-option @click.native="chooseOption" value="Option 3">Option nr 3</select-option>
          <select-option @click.native="chooseOption" value="Option 4">Option nr 4</select-option>
          <select-option @click.native="chooseOption" value="Option 5">Option nr 5</select-option>
        </select-options>
      </transition>
    </select-wrapper>
    <label>Example label</label>
  </div>
</template>

(... Script part the same as in basic example ...)
                
            

In order to change a select color use one of the following color props:

1. primary

2. danger

3. default

4. secondary

5. success

6. info

7. warning

8. ins

9. dark


Multiple select MDB Pro component

                
<template>
  <div>
    <select-wrapper multiple>
      <select-input @click.native="openSelect(2)" :text="text[2]"></select-input>
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave">
        <select-options v-show="active[2]" class="collapse-item">
          <select-option disabled>Choose your option</select-option>
          <select-option @click.native="chooseOption" multiple value="Option 1">Option nr 1</select-option>
          <select-option @click.native="chooseOption" multiple value="Option 2">Option nr 2</select-option>
          <select-option @click.native="chooseOption" multiple value="Option 3">Option nr 3</select-option>
          <select-option @click.native="chooseOption" multiple value="Option 4">Option nr 4</select-option>
          <select-option @click.native="chooseOption" multiple value="Option 5">Option nr 5</select-option>
          <btn save color="primary" size="sm">Save</btn>
        </select-options>
      </transition>
    </select-wrapper>
    <label>Example label</label>
  </div>
</template>

(... Script part the same as in basic example ...)
                
            

Options groups MDB Pro component

                
<template>
  <div>
    <select-wrapper>
      <select-input @click.native="openSelect(3)" :text="text[3]"></select-input>
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave">
        <select-options v-show="active[3]" class="collapse-item">
          <select-option disabled>team 1</select-option>
          <select-option @click.native="chooseOption" value="Option 1">Option nr 1</select-option>
          <select-option @click.native="chooseOption" value="Option 2">Option nr 2</select-option>
          <select-option disabled>team 2</select-option>
          <select-option @click.native="chooseOption" value="Option 3">Option nr 3</select-option>
          <select-option @click.native="chooseOption" value="Option 4">Option nr 4</select-option>
        </select-options>
      </transition>
    </select-wrapper>
    <label>Example label</label>
  </div>
</template>

(... Script part the same as in basic example ...)
                
            

Select with icons MDB Pro component

                
<template>
  <div>
    <select-wrapper>
      <select-input @click.native="openSelect(4)" :text="text[4]"></select-input>
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave">
        <select-options v-show="active[4]" class="collapse-item">
          <select-option disabled>Choose your option</select-option>
          <select-option icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" @click.native="chooseOption" value="Option 1">Option nr 1</select-option>
          <select-option icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" @click.native="chooseOption" value="Option 2">Option nr 2</select-option>
          <select-option icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" @click.native="chooseOption" value="Option 3">Option nr 3</select-option>
        </select-options>
      </transition>
    </select-wrapper>
    <label>Example label</label>
  </div>
</template>

(... Script part the same as in basic example ...)
                
            

Disabled select MDB Pro component

By adding a disabled attribute to the select (or particular option), you can make it unselectable.

                
<template>
  <div>
    <select-wrapper disabled>
      <select-input disabled text="Choose Your option"></select-input>
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave">
        <select-options class="collapse-item">
          <select-option @click.native="chooseOption" value="Option 1">Option nr 1</select-option>
          <select-option @click.native="chooseOption" value="Option 2">Option nr 2</select-option>
          <select-option @click.native="chooseOption" value="Option 3">Option nr 3</select-option>
          <select-option @click.native="chooseOption" value="Option 4">Option nr 4</select-option>
        </select-options>
      </transition>
    </select-wrapper>
    <label>Example label</label>
  </div>
</template>

(... Script part the same as in basic example ...)
                
            

Default select

Default Select doesn't require an initialization. You only need to add a .browser-default class to the select element.

                
<label>Default Select</label>
<select class="browser-default">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>