Question

我有一个下拉列表，当它发生变化时会触发ajax调用：

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

我的问题是，在Firefox中，使用上/下光标键循环显示下拉选项，不会触发js onChange()事件。在IE浏览器中没问题。

如何让Firefox将上/下游标视为onChange？我可以做一个/或在事件上，使onChange或按键触发同样的事情吗？

感谢。

Answer 1

你实际上正在利用IE中的一个错误。 Firefox正确支持onChange，因为它不应该在浏览器失去select字段的焦点之前触发。（我answered a question昨天关于这个问题，事实上。）使用onChange选择一个实际上有点危险，特别是因为键盘只有用户才能跳过某些选项。（最重要的是，鼠标滚轮似乎通过多个答案旋转，但它实际上会触发它在IE上传递的每个条目的onChange。）

如果你真的想要在有人按下或按下时触发事件，只要按下“向上”或“向下”键，我就会挂钩onKeyPress或onKeyDown事件。

Answer 2

更好的选择是使用.on()将函数绑定为多个事件

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

Answer 3

也许不使用change（）事件而是使用blur（）事件并检查值是否已更改？

仅供参考，我没有测试过这个，只是我的想法。而且我不确定这是否是预期的效果，因为它会引起失去焦点，但我建议它在不同的浏览器中保持效果一致。

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 4

我刚刚在firefox中遇到了一些奇怪的行为，它允许用户打开选择下拉列表，使用箭头导航，然后用户可以点击另一个元素而不是标签或点击一侧，这将导致更改选择值而不触发change事件。

要解决此问题，只要change（请同时建议其他事件？）事件被触发，并且select与之前的值不同，您就可以触发keyup。

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');
    }
});

如果您在网页的运行时间内创建了选择元素，则可以使用.live()函数。

Answer 5

我使用jquery focusout

开始工作

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

<select>和firefox </select>上的jQuery change（）

5 个答案: