Question

我有一个选择标记：

           <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个选项，如何使用jQuery或纯JavaScript滚动查看3-5或4-6中的元素？

Answer 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中不起作用。

Answer 2

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

只需为

中的select元素和值设置合适的选择器

Answer 3

我构建了这个扩展，这是一个更适合这个问题的解决方案。它灵活且可重用，并且构建在jQuery之上。 http://jsfiddle.net/db86eu91/4/

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

Copyright (c) 2015 Márcio Reis marcio.reis@outlook.com

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);
}

})();

Answer 4

这是使用jquery的coffeescript，（coffeescript直接翻译成javascript）

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

Answer 5

或者你可以使用焦点（）。

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

Answer 6

您可以使用列表中的val()功能。使用您要显示的项目中的最后一项作为参数

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

这将显示3-5。

Answer 7

以下是此

的解决方法

正在使用 demo

<强>代码

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

Answer 8

尽管从2011年开始，我面临着Primefaces的一个大问题，因为我广泛使用了列表框。

当我从数据库加载项目以填充许多列表框时，默认情况下它们没有滚动。

我通过创建JavaScript函数来解决这个问题。

//此函数用于包含许多项目的primefaces列表框中（不使用HTML标记＆＃39;选项值=＆＃34; XXX＆＃34;已选择＆＃39;）。因此，默认情况下，如果当前所选项目不在视图范围内，例如在底端附近，则滚动根本不执行。

要使用下面的功能，您需要在列表框中添加一个javascript调用，例如oncomplete =＆＃34; autoScrollListBox（＆＃39; #form \：lixtboxID＆＃39;）;＆＃34; < / p>

您可以自定义此功能以遍历/循环浏览其他列表，例如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});
    }

如何使用JavaScript或jQuery滚动选择列表？

8 个答案: