2

I've got a select field that has logic on keyup, and change, to do stuff. Is there a way to check how it was changed?

For example: I only want the logic to be fired if it was changed by a mouse, or if enter was pressed on it.

For those looking for my exact solution

http://aaronscherer.me/blog/2013/07/31/jquery-roll-to-next-input/

Ascherer
  • 8,223
  • 3
  • 42
  • 60

3 Answers3

3

Yes - you can listen to any event on any element in the DOM. Check out this fiddle as a starting point. Here is a full list of mouse events and keyboard events you can listen for.

HTML

<select class="my-select-1">
    <option value="1">First</options>
    <option value="2">Second</options>
</select>

<select class="my-select-2">
    <option value="1">A choice</options>
    <option value="2">Another choice</options>
</select>

jQuery

$(document).ready(function() {

    $(".my-select-1").on("click", function(event){
        alert('Do something - click event');
    });

    $('.my-select-2').on('keypress', function(e) {
         var code = (e.keyCode ? e.keyCode : e.which);
         if(code == 13) { //Enter keycode
            alert('Do something - enter key press');
         }    
    });

});

In the example above, $(".my-select-1) is the selector, it could be anything (an ID, a element type, etc). More information on selectors here. The next part, .on("mousedown" attaches an event handler function for one or more events to the selected elements - in this case just a single event, mousedown. More info about on here.

The second example, is a bit more fancy as we have to determine which key was pressed, but other than that uses the same concept. You can find a very lengthy discussion about this on this post, but please note as of 1.7 on is the preferred method (not bind).

Community
  • 1
  • 1
MaxPowers
  • 474
  • 1
  • 4
  • 18
  • I swear, i thought click happened on the first click of the select... Well This pretty much solved my question, I'll be using this with possibly @undefined's answer, joining the two `on` statements into one – Ascherer Jul 30 '13 at 23:48
  • Yeah - I was just going to say if you gave an example of your code it would help us give you the best suggestion. Depending on how you approach it @undefined method would work also - by placing a switch or if statements inside the function he suggests to have different behaviors for different events. – MaxPowers Jul 30 '13 at 23:49
  • yeah, that's the idea. Thanks – Ascherer Jul 30 '13 at 23:52
  • Also, should probable mention, I'm using `click` instead of `mousedown`, as mousedown gets fired when you click on the select to get the list of options – Ascherer Jul 30 '13 at 23:55
  • I put my exact solution in the OP – Ascherer Jul 31 '13 at 19:58
1

If you want to know the type of the event, you can simply use the type property of the event object:

$('select').on('change keyup ...', function(event) {
   var type = event.type;
   // ...
});
Ram
  • 143,282
  • 16
  • 168
  • 197
0

You could use onchange event, something like this : 

$(document).on('change','#your_select',function() {
    //do something
})
Timur Shahbanov
  • 425
  • 3
  • 12
  • 1
    OP wants to be able to respond to specific modes of change; I.e keyboard vs mouse. Rather than just responding to change entirely – Fergus In London Jul 30 '13 at 23:40