Detecting Interaction with a Selection Field

Question

How (using javascript or jQuery) I can determine when the value was selected from the selection field, even if it has the same parameter that was previously selected (i.e. no change event occurs).

Mostly I need this for the mouse, but a solution that works on the keyboard would be convenient.

Answer 1

The only solution that I found workable is to raise an event changeby setting the value selectto another in mousedown. In the markup, I created one additional parameter (i.e., the first child) and made it hidden (it hides perfectly in Chrome / FF / Safari, IE, as usual). So everything looks fine.

<select>
    <option style="display: none"></option>
    <option>First</option>
    <option>Second</option>
    <option>Third</option>
</select>​

Then, using jQuery, we bind events changeand mousedownthus, when triggered mousedown, selectresets its value to the value of the hidden option.

$("select").on({
    change: function() {
        console.log($(this).val());
    },
    mousedown: function() {
        $(this).val($(":first", this).val());
    }
});​

DEMO: http://jsfiddle.net/LzNrS/

The UPDATE: . To save the selected value when the user clicked on select, but decided not to select anything, we can slightly change the code by adding an blurevent and an update mousedown.

var special = ""; // special hidden option value
var value = ""; // temporary variable

$("select").on({
    change: function() {
        console.log($(this).val());
    },
    mousedown: function() {
        if (this.value == special) {
            $(this).val(value);
            return;
        }
        value = this.value;
        $(this).val(special);
    },
    blur: function() {
        if (this.value == special)
            $(this).val(value);
    }
});​

DEMO: http://jsfiddle.net/LzNrS/1/

Answer 2

, , .

, http://jsfiddle.net/w4DEJ/4/

Answer 3

, focus() : http://api.jquery.com/focus/