jQuery: Infinite scrolling Select Box -
i trying make better function of once answered here, i'm running bit of snag don't quite understand. wanted able use "keydown" allow user "hold up/down arrow key" , keep scrolling through options. odd part that, while functions intended within "keydown", see in fiddle, time reaches "keyup" value set prev/next option of first/last, respectively.
to better idea of mean, please explore following:
jsfiddle
slightly alternate approach
same result
$("select").on("keydown", function(e) { var ekey = e.which || e.key, selected = $(this).find("option:selected"); if (ekey == 38 && selected.is(":first")) { // arro $(this).val($(this).find("option").last().val()); } else if (ekey == 40 && selected.is(":last")) { // down arro $(this).val($(this).find("option").first().val()); } }) it looks me should work fine, of course, doesn't
return false after loop selected item.
$("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")) { // 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() }); otherwise looping , browser's default behavior triggering.
for interested, final result: jsfiddle
also, see jquery plugin of this! jsfiddle
Comments
Post a Comment