Get the value of dropdown option when mouseover using jquery

Question

i have a drop down list in html page and i need to get the value of the mouse-over item using j Query, please advise

my dropdown code

<select name="select2" id="sub_groups" class="form-control input-md" onchange="getval(this);" >
                                                     <option data-group='SHOW' value="0" selected="selected">Select Turbine Type</option>
                                                      <option data-group='1' value="V1">V39/ V42/ V44/ V47</option>
                                                      <!--option data-group='1' value="V2">V42-600KW</option>
                                                      <option data-group='1' value="V3">V44-600KW</option>
                                                      <option data-group='1' value="V4">V47-660KW</option-->
                                                      <option data-group='1' value="V5">V52-850KW</option>
                                                      <option data-group='1' value="V6">V66-1.65MW/ 1.75MW</option>
                                                      <!--option data-group='1' value="V7">V66-1.75MW</option-->
                                                      <option data-group='1' value="V8">V80-V90 1.8-2.0MW, MK1-5</option>
                                                      <option data-group='1' value="V9">V80-V90 1.8-2.0MW, MK5.1,6-7</option>
                                                      <option data-group='1' value="V10">V80-V90 1.8-2.0MW, MK8</option>
                                                      <option data-group='1' value="V11">V82-1.65MW</option>
                                                      <option data-group='1' value="V12">V90-3MW</option>
                                                      <option data-group='1' value="V14">V100 1.8-2.0MW, MK7</option>
                                                      <option data-group='1' value="V15">V100 2.0MW, MK9</option>
                                                      <option data-group='1' value="V16">V100 2.0MW, MK10</option>
                                                      <option data-group='1' value="V18">V110-2.0MW, Mk10, 10B</option>
                                                      <option data-group='1' value="V17">V105-3.3/3.45MW, MK2C</option>   
                                                      <option data-group='1' value="V19">V112-3.0 MW, Mk0,0E,1A,1B</option>
                                                      <option data-group='1' value="V20">V112-3.3/3.45MW, MK2A-2C</option>
                                                      <option data-group='1' value="V21">V117-3.3/3.45MW, MK2A-2C</option>
                                                      <option data-group='1' value="V22">V126-3.3/3.45MW, MK2A-2C</option>
                                                      <option data-group='1' value="V23">NM52 / NM64(950KW, 1MW) </option>
                                                      <!--option data-group='1' value="V24">NM54-950KW</option>
                                                      <option data-group='1' value="V25">NM54-1MW</option-->

                                                    </select>

and my jquery

$("#sub_groups").hover(function() {
alert("hello");

});

When i mouse over on any of the dropdown item i should get the values

What did you try so far? – Amr Elgarhy Jul 12 '17 at 11:27 — Amr Elgarhy, Jul 12 '17 at 11:27
@ponraj89 check with my answer – prasanth Jul 12 '17 at 11:41 — prasanth, Jul 12 '17 at 11:41

Amr Elgarhy · Answer 1 · 2017-07-12T11:53:29.080

It will be something like this:

$('#sub_groups').mousemove(function() {
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select2" id="sub_groups" class="form-control input-md" onchange="getval(this);">
                                                     <option data-group='SHOW' value="0" selected="selected">Select Turbine Type</option>
                                                      <option data-group='1' value="V1">V39/ V42/ V44/ V47</option>
                                                      <!--option data-group='1' value="V2">V42-600KW</option>
                                                      <option data-group='1' value="V3">V44-600KW</option>
                                                      <option data-group='1' value="V4">V47-660KW</option-->
                                                      <option data-group='1' value="V5">V52-850KW</option>
                                                      <option data-group='1' value="V6">V66-1.65MW/ 1.75MW</option>
                                                      <!--option data-group='1' value="V7">V66-1.75MW</option-->
                                                      <option data-group='1' value="V8">V80-V90 1.8-2.0MW, MK1-5</option>
                                                      <option data-group='1' value="V9">V80-V90 1.8-2.0MW, MK5.1,6-7</option>
                                                      <option data-group='1' value="V10">V80-V90 1.8-2.0MW, MK8</option>
                                                      <option data-group='1' value="V11">V82-1.65MW</option>
                                                      <option data-group='1' value="V12">V90-3MW</option>
                                                      <option data-group='1' value="V14">V100 1.8-2.0MW, MK7</option>
                                                      <option data-group='1' value="V15">V100 2.0MW, MK9</option>
                                                      <option data-group='1' value="V16">V100 2.0MW, MK10</option>
                                                      <option data-group='1' value="V18">V110-2.0MW, Mk10, 10B</option>
                                                      <option data-group='1' value="V17">V105-3.3/3.45MW, MK2C</option>   
                                                      <option data-group='1' value="V19">V112-3.0 MW, Mk0,0E,1A,1B</option>
                                                      <option data-group='1' value="V20">V112-3.3/3.45MW, MK2A-2C</option>
                                                      <option data-group='1' value="V21">V117-3.3/3.45MW, MK2A-2C</option>
                                                      <option data-group='1' value="V22">V126-3.3/3.45MW, MK2A-2C</option>
                                                      <option data-group='1' value="V23">NM52 / NM64(950KW, 1MW) </option>
                                                      <!--option data-group='1' value="V24">NM54-950KW</option>
                                                      <option data-group='1' value="V25">NM54-1MW</option-->

                                                    </select>

$('#sub_groups').mousemove(function () {
        alert($(this).val());
 });

You use the mouse move event and get the value inside

Thanks for the advise, i already tried and i am getting the values only on mouse release. i need it on the mouse over — , Jul 12 '17 at 11:37
did you check my code snippet?, i see it is working there, or do you want something else to happen? — Amr Elgarhy, Jul 12 '17 at 11:44
on getting the value through mouseover i am going to highlight few other items in the same list ..but since i am getting the values only after mouse release i am not able to highlight other related things — , Jul 12 '17 at 11:51

score 0 · Answer 2 · answered Jul 12 '17 at 11:37

I think its a dynamically appended element.so use with on()

$(document).on('mouseover','#sub_groups',function() {
  console.log($(this).val())

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select2" id="sub_groups" class="form-control input-md" onchange="getval(this);">
                                                     <option data-group='SHOW' value="0" selected="selected">Select Turbine Type</option>
                                                      <option data-group='1' value="V1">V39/ V42/ V44/ V47</option>
                                                      <!--option data-group='1' value="V2">V42-600KW</option>
                                                      <option data-group='1' value="V3">V44-600KW</option>
                                                      <option data-group='1' value="V4">V47-660KW</option-->
                                                      <option data-group='1' value="V5">V52-850KW</option>
                                                      <option data-group='1' value="V6">V66-1.65MW/ 1.75MW</option>
                                                      <!--option data-group='1' value="V7">V66-1.75MW</option-->
                                                      <option data-group='1' value="V8">V80-V90 1.8-2.0MW, MK1-5</option>
                                                      <option data-group='1' value="V9">V80-V90 1.8-2.0MW, MK5.1,6-7</option>
                                                      <option data-group='1' value="V10">V80-V90 1.8-2.0MW, MK8</option>
                                                      <option data-group='1' value="V11">V82-1.65MW</option>
                                                      <option data-group='1' value="V12">V90-3MW</option>
                                                      <option data-group='1' value="V14">V100 1.8-2.0MW, MK7</option>
                                                      <option data-group='1' value="V15">V100 2.0MW, MK9</option>
                                                      <option data-group='1' value="V16">V100 2.0MW, MK10</option>
                                                      <option data-group='1' value="V18">V110-2.0MW, Mk10, 10B</option>
                                                      <option data-group='1' value="V17">V105-3.3/3.45MW, MK2C</option>   
                                                      <option data-group='1' value="V19">V112-3.0 MW, Mk0,0E,1A,1B</option>
                                                      <option data-group='1' value="V20">V112-3.3/3.45MW, MK2A-2C</option>
                                                      <option data-group='1' value="V21">V117-3.3/3.45MW, MK2A-2C</option>
                                                      <option data-group='1' value="V22">V126-3.3/3.45MW, MK2A-2C</option>
                                                      <option data-group='1' value="V23">NM52 / NM64(950KW, 1MW) </option>
                                                      <!--option data-group='1' value="V24">NM54-950KW</option>
                                                      <option data-group='1' value="V25">NM54-1MW</option-->

                                                    </select>

Thanks @prasad but again struck up with the same thing – Jul 12 '17 at 11:52 — , Jul 12 '17 at 11:52
on mouse over it is not giving the value – Jul 12 '17 at 16:14 — , Jul 12 '17 at 16:14

Get the value of dropdown option when mouseover using jquery

2 Answers2