CODEWITHSUNDEEP
javascriptjqueryhtml
Denis Kulagin
Denis Kulagin

Reputation: 8906

SELECT onChange event

How can I keep track of changes in SELECT element BEFORE user chooses an item using mouse or by pressing Enter?

One can listen to keyUp event, which allows to track user navigating through the list using keyboard. But is there more generic approach, which allows tracking list "prefinal" changes?

Upvotes: 1

Views: 3540

Answers (4)

Anonymous
Anonymous

Reputation: 4632

I always use focus click listener for this.

$('select').bind('focus click',function(){
//IMACHANGINGMYOPTION!!!!!!!!!!
    //var val=$(this).val();
});

The above should be triggered before the on change event:

$('select').change(function(){
//The option has been changed.
});

Explanation: whenever a user focuses select, we do get the value of the selected item, and we can manipulate it before the onchange event if triggered. The click listener is added in case our select is already focused, and the user clicks it to expand before he actually selects an option and triggers a change.

This is an example of usage, that lets us track the previous value:

http://jsfiddle.net/SUKqS/8/

Upvotes: 2

FrontEnd Expert
FrontEnd Expert

Reputation: 5803

you have to create a function like this example:-

function example(){
jQuery('select#service_billing_state').change(function () {
//your code here
});
}

and you have to call this function in onchange, onblur, onkey , onfocus...

Upvotes: 0

SkaveRat
SkaveRat

Reputation: 2282

there is no event that fires when moving the mouse over the select-items.

you can, as you said, track the mouse movement. But as different browsers render the lists differently, that would be a difficult task.

you can however create a selectbox yourself without using the native select

Upvotes: 0

Purpletoucan
Purpletoucan

Reputation: 6572

Javascript supports an 'onbeforechange' event which will probably do the trick, but I don't know how widely implemented this is across browsers? If that is supported widely enough, store the previous value before it is changed. Failing that, just store the original values in hidden fields or JS variables.

Upvotes: 0

Related Questions