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

forked fiddle

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

Popular posts from this blog

php - Dynamic url re-writing using htaccess -

python - How to create a legend for 3D bar in matplotlib? -

java - Multi-Label Document Classification -