Попробуйте изменить
$("#users").change(function(){
до
$("#users").bind('change keyup', function(e) {
, который должен ограничивать вашу функцию как для события onchange, так и для нажатия клавиши со стрелкой вниз или вверх
обратите внимание, вы также можете использовать keydown, но он может не сработать, как ожидалось, так как ваш код будет работать до того, как будет выполнено выбранное изменение
И в случае, если вы хотите бесконечно прокручивать окно выбора, у меня есть отличный маленький функционал, я написал, что до сих пор, по крайней мере, для меня, работает идеально и может быть назначен всем сам по себе, конечно, и с намерением увидеть это, нам нужно работать над клавиатурой, и вам все равно придется нажимать клавишу со стрелкой снова и снова, но она будет продолжать циклически перебирать все опции. Хотя я уверен, что он будет работать и с keydown, но мы не используем его таким образом, поэтому я не проверял его. Опять же, нажатие клавиши может работать не так, как задумано, особенно если выбор имеет только 2 или 3 параметра.
function selectInfinateScroll() {
if ($(this).data("lastSelected")) {
if ($(this).data("lastSelected")[0] == $(this).children("option:selected")[0]) {
if ($(this).children("option:selected").index() == 0) {
$(this).children("option:selected").prop("selected", false);
$(this).children("option:last-child").prop("selected", true).change();
}
else {
$(this).children("option:selected").prop("selected", false);
$(this).children("option:first-child").prop("selected", true).change();
};
};
};
$(this).data("lastSelected", $(this).children("option:selected"));
}
$(function() {
// Enable 'Scrolling Through' on Select Boxes
$("select").keyup(selectInfinateScroll);
});
ОБНОВЛЕНО!
Я оставляю оригинальный ответ, так как он использует альтернативный метод, который может быть более полезным для некоторых. Тем не менее, я придумал как более короткую функцию, которая работает с «keydown», так и плагин jQuery, использующий упомянутую функцию, которая позволяет пользователю «удерживать» и клавишу со стрелкой и все же бесконечно сортировать опции!
Во-первых, новая функция
function keydownInfiniteSelect(e) {
var eKey = e.which || e.key,
selected = $(this).find("option:selected");
if (eKey == 38 && selected.is(":first-child")) { // up arro
$(this).find("option").last().prop("selected", true); // set value to last option
$(this).change(); // ensure select triggers change do to return false
return false; // keeps select from skipping to second last option
}
else if (eKey == 40 && selected.is(":last-child")) { // down arro
$(this).val($(this).find("option").first().val()); // set value to first option
$(this).change(); // ensure select triggers change
return false; // keeps select from skipping to second option
}
}
Используйте как: $("select").keydown(keydownInfiniteSelect);
И стиль плагина jQuery!
(function($){$.infiniteSelect||($.extend({infiniteSelect:function(b){return b.each(function(){$(this).data("infiniteSelect")||($.fn.on?$(this).on("keydown",$.infiniteSelect.methods.keydownInfiniteSelect).data("infiniteSelect",!0):$(this).bind("keydown",$.infiniteSelect.methods.keydownInfiniteSelect).data("infiniteSelect",!0))})}}),$.fn.extend({infiniteSelect:function(){return $.infiniteSelect($(this))}}),$.infiniteSelect.methods={keydownInfiniteSelect:function(b){b=b.which||b.key;var c=$(this).find("option:selected");
if(38==b&&c.is(":first-child"))return $(this).find("option").last().prop("selected",!0),$(this).change(),!1;if(40==b&&c.is(":last-child"))return $(this).val($(this).find("option").first().val()),$(this).change(),!1}})})(jQuery);
Использовать как $("select").infiniteSelect() ИЛИ $.infiniteSelect("select")
jsFiddle of Plugin Мини Fied
Uncut Plugin Fiddle
PS. У меня почти есть готовый JavaScript-код Vanilla для этой функции, за исключением того, что часть метода «set to last option» продолжает умирать, либо становится нулевой, либо пропускается со второго до последнего. Я просто не могу заставить его установить правильно. Если кто-то захочет исправить это и обновить, я буду очень признателен. См ЗДЕСЬ