Get value of select box on hover or change in same event

Question

sorry for bad English.How to get value of an select box if user change a select box or just hover on select box with a single event. i have tried this one but its not working

jQuery("select[name*=super_attribute]").on('change , hover', function(){
 alert('trigger'); 
});

I know we can do like this make separate functions

jQuery("select[name*=super_attribute]").on('change', function(){
 alert('trigger'); 
});

And

jQuery("select[name*=super_attribute]").on('hover', function(){
 alert('trigger'); 
});

But i want to do with a single event not separately because i will do same functionality in both cases.

Possible duplicate of [jQuery multiple events to trigger the same function](http://stackoverflow.com/questions/2534089/jquery-multiple-events-to-trigger-the-same-function) — Muhammad Ashikuzzaman, Oct 04 '16 at 08:33

Rajesh Patel · Accepted Answer · 2016-10-04T08:35:19.710

1

There is no need for comma in event listing, comma is used when you have to apply any action for multiple selector

jQuery("select[name*=super_attribute]").on('change mouseover', function(){
  alert('trigger'); 
});

If You have to select multiple element then you can use comma like this

jQuery("select[name*=super_attribute],#xyz").on('change mouseover', function(){
      alert('trigger'); 
    });

edited Oct 04 '16 at 08:35

answered Oct 04 '16 at 08:29

Rajesh Patel

1,946
16
20

its still not working only change event is working not hover – OBAID Oct 04 '16 at 08:32
try mouseover instead of hover – Rajesh Patel Oct 04 '16 at 08:33

Satpal · Answer 2 · 2016-10-04T08:52:07.757

0

Remove the comma , between the event names - they should be separated with a space only.

jQuery("select[name*=super_attribute]").on('change mouseover', function(){
  alert($(this).val()); 
});

jQuery(document).ready(function() {
  jQuery("select[name*=super_attribute]").on('change mouseover', function() {
    console.clear();
    console.log($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="super_attribute">
  <option>1</option>
  <option selected>2</option>
  <option>3</option>
</select>

edited Oct 04 '16 at 08:52

answered Oct 04 '16 at 08:26

Satpal

132,252
13
159
168

still not working only change is working but not on hover – OBAID Oct 04 '16 at 08:29
@OBAID use mouseover rather hover. And Also se same type of question is [here](http://stackoverflow.com/questions/2534089/jquery-multiple-events-to-trigger-the-same-function) – Muhammad Ashikuzzaman Oct 04 '16 at 08:37

score 0 · Answer 3 · answered Oct 04 '16 at 08:47

There are two methods to bind elements to multiple events.

You can use .on() to bind a function to multiple events.

$('#yourelement').on('change mouseover keyup keypress blur', function(e) {
     alert('trigger'); 
});

define a function like

var myFunction = function() {
  alert('trigger'); 
}

and pass myFunction as a parameter to event function.

$('#yourelement')
.change(myFunction)
.mouseover(myFunction)
.keyup(myFunction)
.keypress(myFunction)
.blur(myFunction)

Note: #yourelement is the id of the element to which event to be binded. and call these methods after document ready.

In your case you can either use $(function(){

    jQuery("select[name*=super_attribute]").on('change mouseover', function(){
     alert('trigger'); 
    });
});

or $(function(){ var myFunction = function() { alert('trigger'); }

$('select[name*=super_attribute]')
    .change(myFunction)
    .mouseover(myFunction);
});

Get value of select box on hover or change in same event

3 Answers3