Question

I have a change event bound to a select tag. The first option in the select tag is disabled because I am using it as the default text for the menu. If the user clicks on the select tag, hovers over an option without selecting it, and then clicks outside of the select menu twice the change event is being fired. How can I prevent this change event from being fired.

The HTML

<select id="select">
    <option disabled="disabled" selected="selected">Title</option>
    <optgroup label="things">
        <option>cars</option>
        <option>boats</option>
        <option>world</option>
    </optgroup>
</select>

The jQuery

$('#hide').click(function(){
    $('#select').hide();
});
$('#show').click(function(){
    $('#select').show();
});
$('#select').change(function(){
    alert($(this).val());
});

The code is just a sample of what my problem is. I added the buttons because in my real code I am hiding the select menu when the user clicks outside of it.

Here is a fiddle with the above code.

EDIT

After looking at comments it looks to be a firefox specific issue as it works fine in Internet Explorer, Chorme, and Safari.

Answer 1

You could always associate some data on the select with the current value and validate that it actually changed.

$('#hide').click(function(){
    $('#select').hide();
});
$('#show').click(function(){
    $('#select').show();
});
$('#select').data('currVal', 'Title');
$('#select').change(function(){
    if($(this).val() != $(this).data('currVal') {
        // this is actual value change
        alert($(this).val());
        $(this).data('currVal', $(this).val());
    }
});

I have updated the original fiddle with solution:

http://jsfiddle.net/TPpD6/4/