Как прокрутить список выбора с помощью JavaScript или jQuery?

Ответ 1

.scrollTop() может работать:

$('select').scrollTop(30);

И вы можете перейти к определенному элементу, используя это:

var $s = $('select');

var optionTop = $s.find('[value="3"]').offset().top;
var selectTop = $s.offset().top;

$s.scrollTop($s.scrollTop() + (optionTop - selectTop));

Попробуйте здесь: http://jsfiddle.net/kj9p4/

Примечание: в Chrome не работает.

Ответ 2

 $("select").scrollTop($("select").find("option[value=4]").offset().top);

Просто установите соответствующие селекторы для выбранного элемента и значения внутри

Ответ 3

Я построил это расширение, которое является более подходящим решением этой проблемы. Он гибкий и многоразовый, и он построен поверх jQuery. http://jsfiddle.net/db86eu91/4/

;(function(){
/**
The MIT License (MIT)

Copyright (c) 2015 Márcio Reis [email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
$.fn.ScrollToValue = function(target){
    var $select = $(this);
    if (!$select.length) return;

    var value = target;

    //how many pixels is the select list scrolled from the moment we run this code???
    var distanceScrolledFromTop = $select.scrollTop();
    //how many pixels separate the top of the page from the <select> element that we pretend to manipulate
    var offsetSelect = $select.offset().top;
    //assuming a offset().top of 0 on our list how many pixels separate our target option from the top of the page? 
    var offsetElement = $select.find('[value=' + value + ']').offset().top + distanceScrolledFromTop;

    //Because the offset of our element is always bigger than the offset of our select box, we must subtract the offset of our target element by the offset of our list. That it
    $select.scrollTop(offsetElement - offsetSelect);
}

})();

Ответ 4

Это coffescript, используя jquery, (coffeescript переводит непосредственно в javascript)

exports.mylist_scroll_to  = (value) ->
    element = $("#mylist")[0]
    item_height = element.scrollHeight/element.length
    $("#mylist").scrollTop(item_height*(element.selectedIndex))

Ответ 5

Или вы можете просто использовать focus().

$("select").find("option[value=4]").focus();
$('select option[value="banana"]').focus();

Ответ 6

Вы можете использовать функцию val() в вашем списке. Используйте последний элемент из тех, которые вы хотите отобразить в качестве аргумента

$("#foo").val('5');

Это покажет 3-5.

Ответ 7

Вот обходной путь к этому

Работа демонстрация

код

$(function(){
    //Select the last option in the range which you want to scroll to
    var lastOption = $("select").find("option[value=5]")
        //Store the selection state
        var isSelected = lastOption.is(":selected");

        lastOption.attr("selected", true)//This will scroll to the option
            .attr("selected", isSelected); //Restore the selection state
});

Ответ 8

Несмотря на то, что с 2011 года я столкнулся с большой проблемой с Primefaces, я широко использую список.

Когда я загружаю элементы из базы данных, чтобы заполнить множество списков, они по умолчанию прокручивались.

Я исправил это, создав функцию JavaScript.

//Эта функция используется в списках прайс-листов со множеством элементов (которые не используют значение HTML-тега "значение параметра =" XXX "выбрано" ). Таким образом, по умолчанию, если текущий выбранный элемент не отображается, как и в нижнем конце, прокрутка вообще не выполняется.

Чтобы использовать функцию ниже, вам нужно поместить вызов javascript в свой список, например oncomplete = "autoScrollListBox ('# form \: lixtboxID');"

Вы можете настроить эту функцию для прохождения/прокрутки других списков, таких как dataTables или настраиваемых имен ui - ****** - ***** (просто измените их ниже).

function autoScrollListBox(id) {
    var listContainer=id+'  .ui-selectlistbox-listcontainer';
    var listContainerList=id+'  .ui-selectlistbox-listcontainer  .ui-selectlistbox-list';

    var listTop = $(listContainerList).offset().top;
    var selectedContainer=id+ ' .ui-state-highlight';
    var selectedOptionTop =$(id+' .ui-state-highlight').offset().top;
   $(listContainer).animate( {scrollTop:selectedOptionTop-listTop});
    }