jQuery:无限滚动选择框

时间:2013-05-21 21:57:24

标签: jquery html-select

我正在尝试为我曾经回答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());
    }
})

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

1 个答案:

答案 0 :(得分: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