jQuery change() on <select> and firefox

Question

I have a dropdown that triggers an ajax call when its changed:

$(\'.travel-to\').change(function(){  
    $.ajax({
        type: \"GET\",
        url: \"/inc         


        

Answer 1

I've just experienced some weird behavior in firefox which enables the user to open the select dropdown, navigate with the arrows and then instead of tabbing out or clicking on a side the user can click another element which will result into changing the select value without firing change event.

To work around this you can trigger the change whenever the keyup (please also suggest other events?) event is fired and the select has a different value then the previous.

var selectRegistry = {},
    $selects = $('select');

$selects.bind('change', function() {
    var $this = $(this);
    selectRegistry[$this.attr('id')] = $this.val();
});

$selects.bind('keyup scroll select', function() {
    var $this = $(this);
    if ($this.val()!=selectRegistry[$this.attr('id')])
    {
        $this.trigger('change');
    }
});

You can use .live() function if you'll have dinamically created select elements along the runtime of the web page.

Answer 2

Maybe instead of using the change() event use the blur() event and check to see if the value changed?

FYI, i have not tested this, just an idea that I had. and I am not sure if this is the desired effect because it would trigger on a lost of focus, but I am suggesting it as to keep the effect consistent across different browsers.

var currentValue;

$('.travel-to').blur(function(){
    var val = $(this).val();
    if (currentValue != val) {
        currentValue = val;
        $.ajax({
            type: "GET",
            url: "/inc/rates/rates-viewer.php",
            data: "shtech=y&c_name="+escape(currentValue),
            success: function(html){
                $(".rates-viewer").html(html);
                $(".rates-viewer tr.numbers td").css({ opacity: 0 }).fadeTo("slow",1);
            }
        });
    }
});

Answer 3

You're actually taking advantage of a bug in IE. Firefox supports onChange correctly, as it's not supposed to fire until the browser loses focus of the select field. (I answered a question yesterday about this very issue, in fact.) It's actually kind of dangerous to use onChange with a select, especially because there's no way for keyboard only users to skip some options. (On top of that, the mouse wheel seems to spin by multiple answers, but it actually fires onChange for each entry it passes by on IE.)

If you really want the event to fire whenever someone presses up or down, I would hook into the onKeyPress or onKeyDown events to fire whenever the "up" or "down" key is pressed.

Answer 4

better option is use .on() to bind function as multiple events

$("#member").on("change keyup", function(){
    -----
});

Answer 5

I got it working using jquery focusout

http://api.jquery.com/focusout/