I am trying to get option value on hover/mouseover event when option is hovered using chosen plugin....

Fiddle : Demo Fiddle

Here is js code...

   $("#myselect").chosen();

   $('#myselect').next('.chosen-container').on('mouseenter', 'li.active-result', function(e) {
    alert($(this).text());
    alert($(this).val()); // how to get option value...?
   });

I am trying to get option value on hover/mouseover event when option is hovered using chosen plugin....

Fiddle : Demo Fiddle

Here is js code...

   $("#myselect").chosen();

   $('#myselect').next('.chosen-container').on('mouseenter', 'li.active-result', function(e) {
    alert($(this).text());
    alert($(this).val()); // how to get option value...?
   });

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jun 25, 2014 at 9:12 Developer DeskDeveloper Desk 2,34499 gold badges4242 silver badges7878 bronze badges 2

• you can't get the option value while its not yet selected. – Yaje Commented Jun 25, 2014 at 9:20
• ooh is it ? any other way to get option value? – Developer Desk Commented Jun 25, 2014 at 9:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

USe delegate for that, because chosen plugin creates the .active-result class elements dynamically.

$("#myselect").chosen();

$(document).on("hover",".active-result",function(){
 alert($(this).text());   
});

Fiddle

Edit

$(document).on("hover",".active-result",function(){
    alert($("#myselect option").eq($(this).data("option-array-index")).val());

});

Updated fiddle

You need event delegation for binding the events to dynamically added DOM:

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$("body").on('mouseenter','li.active-result',function(){
  alert($(this).data('option-array-index'));   
});

Working Demo

As this plugin created new elements for options and to read option value you need find option matching text and read its value:

$('#myselect').next('.chosen-container').on('mouseenter', 'li.active-result', function(e) {
    var currentText = $(this).text();
    alert($(this).text());
    alert($('#myselect option').filter(function () { return $(this).html() == currentText; }).val()); // how to get option value...?
 });

Demo