Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

165
Views
How to open a select dropdown on hover using Bootstrap Vue

I need a way to trigger the <select> or <b-form-select> and display the list of dropdown options on mouse hover. Without using JQuery or any external plugin other than Vue.js.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

As per my understanding you want to show/hide the <b-form-select> on mouseover and mouseleave event. If Yes, I have few suggestions :

  • Use a div as a wrapper which will trigger the mouseover and mouseleave events. We can directly trigger the mouse events by appending the native in the itself but once it will hide, there will be no way to get the dropdown back on mouseover again.
  • You can simply show/hide the dropdown via v-show directive. We can easily set the value from our mouse events.

Working Demo :

new Vue({
  el: '#app',
  data() {
    return {
      selected: null,
      isVisible: true,
      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 }
      ]
    }
  },
  methods: {
    onOver() {
      this.isVisible = true;
    },
    onLeave() {
      this.isVisible = false;
    }
  }
})
.wrapper-div {
  height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.css"/>
<div id="app">
  <div class="wrapper-div" @mouseover="onOver" @mouseleave="onLeave">
    <b-form-select
                   v-model="selected"
                   :options="options"
                   v-show="isVisible">
    </b-form-select>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza Report

0

The effect of this solution is similar to opening the select by clicking on it (although, not the same ...)

<template>
  <select ref="mySelect" @mouseenter="hover(true)" @mouseleave="hover(false)" :size="size">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
  </select>
</template>

<script>
import {ref} from 'vue';
export default {
  name: "Test",
  setup(){
    const mySelect = ref();
    const size = ref('0');
    return {mySelect, size}
  },
  methods: {
    hover(val) {
      this.size = val ? this.mySelect.length.toFixed(0) : '0';
    }
  }
}
</script>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!