title: Get values of Bootstrap-select options using jquery
body: <p>I write this Html and use Bootstrap-select to create jquery select</p>
  
  <pre><code>&lt;select id="type" class="selectpicker"&gt;
          &lt;option&gt;Select...&lt;/option&gt;
  &lt;option value="1"&gt;1&lt;/option&gt;
  &lt;option value="2"&gt;2&lt;/option&gt;
  </code></pre>
  
  <p>how can I check mouseover or hover event with jquery ? I want to alert the value of  options.</p>
  
  <p>Bootstrap-select creates select box
  SelectBox is constructed in the following manner:</p>
  
  <pre><code>    &lt;ul class="dropdown-menu inner "&gt;&lt;li class="selected active"&gt;&lt;a role="option"
  
   aria-disabled="false" tabindex="0" class="selected active" aria-selected="true"&gt;
  
  &lt;span class="glyphicon glyphicon-ok check-mark"&gt;&lt;/span&gt;&lt;span 
  
  class="text"&gt;Select...&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a role="option" aria-disabled="false" 
  
  tabindex="0" aria-selected="false"&gt;&lt;span class="glyphicon glyphicon-ok check-
  
  mark"&gt;&lt;/span&gt;&lt;span class="text"&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a role="option" aria-
  
  disabled="false" tabindex="0" aria-selected="false"&gt;&lt;span class="glyphicon 
  
  glyphicon-ok check-mark"&gt;&lt;/span&gt;&lt;span class="text"&gt;2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>solved this in the following manner</p>
  
  <pre><code>    $('.bootstrap-select').on('mouseover', function (e) {
          var $target = $(e.target.children);
          if ($target.is('span')) {
              console.log($target.text());
          }
  </code></pre>