CODEWITHSUNDEEP
javascriptjqueryevent-handlingselectize.js
user3069804
user3069804

Reputation: 167

How to capture hover event on selectize select box

I am am using Brian Reavis' excellent Selectize.js to add functionality to my select inputs.

But I am struggling to add an event handler when the user hovers their mouse above a selectized option. I can see no events documented in the API for this kind of event.

I can see that selectize created its own divs like this

<div data-value="my value" data-selectable="" class="option">my label</div>

and that as I move my mouse over each option the class changes from

class="option" to class="option active" and back again.

But I just cant see a way to add my own handler to these events. Please can someone help.

Many Thanks

Alec

Upvotes: 2

Views: 1223

Answers (1)

BenG
BenG

Reputation: 15164

use the mouseenter on the div inside .selectize-dropdown-content

$('.selectize-control').on('mouseenter', '.selectize-dropdown-content div', function() {
  alert($(this).text())
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js"></script>

<div class="control-group">
  <select id="select-beast" class="demo-default" placeholder="Select a person...">
    <option value="">Select a person...</option>
    <option value="4">Thomas Edison</option>
    <option value="1">Nikola</option>
    <option value="3">Nikola Tesla</option>
    <option value="5">Arnold Schwarzenegger</option>
  </select>
</div>
<script>
  $('#select-beast').selectize({
    maxItems: 3
  });
</script>

Upvotes: 5

Related Questions