jQuery：无限滚动选择框

Question

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

为了更好地了解我的意思，请浏览以下内容：

jsFiddle

Slightly Alternate Approach _相同结果

$("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());
    }
})

在我看来，它应该工作得很好，但当然，它不会

Answer 1

Forked fiddle

循环选定项目后

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