Подобно этому вопросу, Как я могу переместить выбранную опцию в множественном выборе вверх и вниз с помощью кнопок, используя jquery? , но не перемещая выделение вверх и вниз. Но возможность прокручивать список вверх и вниз без полосы прокрутки для более точной прокрутки. Аналогично использованию клавиш вверх и вниз для перемещения по списку вверх или вниз по одному. Как я могу добиться этого с помощью кнопок вверх и вниз с помощью jQuery или JavaScript?
Или есть какие-нибудь атрибуты HTML, которые могут помочь в просмотре длинного списка, более удобном для пользователя?
<select id="selectLongList" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Две кнопки, возможно сбоку
<button id="up">Up</button>
<button id="down">Down</button>
Обновление. После дальнейшего поиска я наткнулся на это решение, Выберите вариант из списка выбора с помощью кнопки «следующий / предыдущий» с jquery. Этот вид повторяет то, что я пытаюсь достичь sh. Но я не хочу перемещать выделение. Я просто хотел бы пройтись по списку вариантов.
Заимствование из одного из ответов. { ссылка }>
$("#next, #prev").click(function() {
$("#mycars :selected")[this.id]().prop("selected", true);
});
Примерно так в том, как он переходит на следующее значение, но работает с множественным выбором и не меняет фактический выбор . Просто переходим к следующему значению.
$("#prev").click(function() {
$('#selectLongList option:selected').prev().prop('selected', true);
});
$("#next").click(function() {
$('#selectLongList option:selected').next().prop('selected', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="button" id="prev">Previous</button>
<select id="selectLongList">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="4">4</option>
<option value="4">4</option>
</select>
<button type="button" id="next">Next</button>