0

I write this Html and use Bootstrap-select to create jquery select

<select id="type" class="selectpicker">
        <option>Select...</option>
<option value="1">1</option>
<option value="2">2</option>

how can I check mouseover or hover event with jquery ? I want to alert the value of options.

Bootstrap-select creates select box SelectBox is constructed in the following manner:

    <ul class="dropdown-menu inner "><li class="selected active"><a role="option"

 aria-disabled="false" tabindex="0" class="selected active" aria-selected="true">

<span class="glyphicon glyphicon-ok check-mark"></span><span 

class="text">Select...</span></a></li><li><a role="option" aria-disabled="false" 

tabindex="0" aria-selected="false"><span class="glyphicon glyphicon-ok check-

mark"></span><span class="text">1</span></a></li><li><a role="option" aria-

disabled="false" tabindex="0" aria-selected="false"><span class="glyphicon 

glyphicon-ok check-mark"></span><span class="text">2</span></a></li></ul>

solved this in the following manner

    $('.bootstrap-select').on('mouseover', function (e) {
        var $target = $(e.target.children);
        if ($target.is('span')) {
            console.log($target.text());
        }
David
  • 4,332
  • 13
  • 54
  • 93

1 Answers1

1

The <select> gets wrapped in a container with class bootstrap-select so after you initialize plugin you can do:

  $('.bootstrap-select').on('mouseenter', function(e){
     console.log($(this).find('select').val())
  })

Or you could delegate the listener before initializing plugin

  $(document).on('mouseenter','.bootstrap-select', function(e){
     console.log($(this).find('select').val())
  })

DEMO

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • This solution only shows initial value when I mouse enter the select. But Then When I press it, and start to move through options nothing happens. That's because you use mouseenter. And I understand this. I changed it to mouseover, and now I get a lot of logs while moving through options. Problem is that I do not get the correct values because this select is constructed in a complicated way I will update my question for that. – David Dec 10 '18 at 18:37
  • Solved myself and updated the question with solution. Marking your answer as solution by the way. You showed the right path. Thanks! – David Dec 10 '18 at 18:57