it-roy-ru.com

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

У меня есть тег выбора:

           <select size="3"> 
           <option value="1">value 1</option> 
           <option value="2">value 2</option> 
           <option value="3">value 3</option> 
           <option value="4">value 4</option> 
           <option value="5">value 5</option> 
           <option value="6">value 6</option> 
           <select> 

Теперь он отображает первые 3 варианта, Как прокрутить, чтобы увидеть элементы 3-5 или 4-6, используя jQuery или чистый JavaScript?

18
Zemzela

.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.

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

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

3
gvelkov

Я построил это расширение, которое является более подходящим решением этой проблемы. Это гибкий и многократно используемый, и он построен на основе 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's it
    $select.scrollTop(offsetElement - offsetSelect);
}

})();
2
Lothre1

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

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

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

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

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

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

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

0
lukad

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

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

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

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

Чтобы использовать приведенную ниже функцию, вам нужно поместить вызов 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});
    }
0
Ivan Rolim

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

Рабочая демо

Код

$(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
});
0
ShankarSangoli