1

我正在尝试使我曾经在这里回答过的事情变得更好，但是我遇到了一些我不太理解的障碍。我希望能够使用“keydown”来允许用户“按住向上/向下箭头键”并继续滚动选项。奇怪的是，虽然它在“keydown”中按预期运行，正如您将在小提琴中看到的那样，当它到达“keyup”时，该值分别设置为第一个/最后一个的上一个/下一个选项.

为了更好地理解我的意思，请探索以下内容：

jsFiddle

稍微交替的方法 相同的结果

$("select").on("keydown", function(e) {
    var eKey = e.which || e.key,
        selected = $(this).find("option:selected");

    if (eKey == 38 && selected.is(":first")) {    //    up arro
        $(this).val($(this).find("option").last().val());
    }
    else if (eKey == 40 && selected.is(":last")) {    //    down arro
        $(this).val($(this).find("option").first().val());
    }
})

在我看来它应该可以正常工作，但当然，它没有

4

1 回答 1

1

分叉的小提琴

return false循环所选项目后。

$("select").on("keydown", function(e) {
    var eKey = e.which || e.key,
        selected = $(this).find("option:selected");
    console.log($(this).val());

    if (eKey == 38 && selected.is(":first")) {    //    up arro
        $(this).find("option").last().prop("selected", true);
        return false;
    }
    else if (eKey == 40 && selected.is(":last")) {    //    down arro
        selected.prop("selected", false);
        $(this).find("option:first").prop("selected", true);
        return false;
    }
    console.log("end keydown", $(this).val());
})
.on("keyup", function(e) {
    console.log("keyup", e.which, $(this).val());
});

$("*").click(function(e) { $("select").focus() });

否则，您正在循环它，然后浏览器的默认行为正在触发。

对于那些感兴趣的人，最终结果：

jsFiddle

另外，请参阅 jQuery 插件！

jsFiddle

于 2013-05-21T23:26:56.763 回答