Javascript jQuery change（）在<；选择>；和firefox

我有一个下拉列表，它在ajax调用发生更改时触发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

或按键触发相同的事件

---

谢谢。

您实际上是在利用IE中的一个bug。Firefox正确地支持onChange，因为在浏览器失去选择字段的焦点之前，它不会启动。（事实上，我昨天提到了这个问题。）将onChange与select一起使用实际上有点危险，特别是因为只有键盘的用户无法跳过某些选项。（最重要的是，鼠标滚轮似乎被多个答案旋转，但实际上，它会为它在IE上通过的每个条目触发onChange。）

---

如果您真的希望在有人按下向上键或向下键时触发事件，我会挂接onKeyPress或onKeyDown事件，以便在按下“向上”键或“向下”键时触发。

可能不使用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);
            }
        });
    }
});

---

我刚刚在firefox中体验到一些奇怪的行为，它使用户可以打开选择下拉列表，使用箭头导航，然后用户可以单击另一个元素，而不必触发

change

事件，从而更改选择值，而无需弹出标签或单击一侧

要解决此问题，您可以在触发

键控

（请同时建议其他事件？）事件时触发

更改

，并且选择的值与上一个不同

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

---

如果要在网页的运行时动态创建select元素，可以使用

.live（）

函数。

我使用jquery实现了它

---

更好的选择是使用

.on（）

将函数绑定为多个事件

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

---

这并不好用，因为你必须在模糊触发之前点击其他的东西（至少在Chrome和FF3.6中是这样）——试过这个方法或者更好（如果你使用jQuery>=1.7）使用

.on（）

方法，而不是

.live（）

。看到了吧，这件事发生在我身上很好。“更改”事件在Safari、Chrome和IE中正确触发。似乎它已成为在元素更改时触发此事件的标准功能，而不是在元素失去焦点后触发；这就是“聚焦输出”的作用。同样，这可能只是最近才引入到现代浏览器中，无论哪种方式FF都应该采用这种更改。我只是在选择框旁边添加一个“Go”按钮来解决这个问题，这样用户就可以完全控制它。我喜欢它。理智的跨浏览器行为！谢谢：）太好了，这应该是最好的答案。谢谢。当浏览器同时触发

change

和

keyup

时，运行回调两次。