Как продвигать выбранную опцию с помощью нажатия кнопки (jQuery)

Question

У меня есть меню выбора с динамическими параметрами. В элементе есть .on"change", который перенаправляется на соответствующую страницу.

Теперь я хочу кнопки «Далее» и «Предыдущая».

Как я могу продвинуть (или отступить) в параметрах, чтобы произошло событие изменения?

Я попытался

$('#nextTipButton').unbind().on("click", function() { 
    $('#hintSelect option:selected').nextSibling.focus(); 
}); 
// Uncaught TypeError: Cannot read property 'focus' of undefined 

и

// the same, but with an added [0] 
$('#nextTipButton').unbind().on("click", function() { 
    $('#hintSelect option:selected')[0].nextSibling.focus(); 
}); 
// nothing happens at all 

селектор является правильным, это console.log s просто отлично. но я не знаю, как заставить кнопки работать есть ли другой способ? это неправильно? как я могу заставить его работать? thanks

Answer 1

Вы можете увеличить имущество selectedIndex самой select. Попробуйте это:

$('#nextTipButton').unbind().on("click", function() { 
    $('#hintSelect')[0].selectedIndex++; 
    $('#hintSelect').change(); 
}); 

Example fiddle

Если вы хотите, чтобы индекс не может превышать количество параметров, которые вы должны были бы использовать это:

$('#nextTipButton').unbind().on('click', function() { 
    var $select = $('select'); 
    var index = ++$select[0].selectedIndex; 
    $select[0].selectedIndex = index % $select.find('option').length; 
    $select.change(); 
}) 

Также обратите внимание, что вы можете устранить необходимость до unbind() событий на элементе каждый раз с использованием одного делегированного обработчика событий:

$(document).on('click', '#nextTipButton', fn); 

Answer 2

Прежде всего, вы должны поместить событие $ .on ('change') в тег select, а не в теги опций. Затем, если вы используете обратные и следующие короткие клавиши или кнопки и меняете этот параметр, он фактически запускает событие изменения.

Чтобы ответить на ваш реальный вопрос, любое событие, зарегистрированное для элемента DOM с помощью функции $ .on(), может быть вызвано с помощью функции $ .trigger(). Поэтому вызовите $ .trigger («change») для нужного элемента, для которого вы хотите инициировать событие.