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

您可以使用列表中的val函数。使用要显示为参数的项目中的最后一项

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

这将显示3-5。

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

请在此处尝试：

---

注意：在Chrome中不起作用。

这里有一个解决方法

工作

代码

---

只需为select元素和值设置适当的选择器，这是使用jquery的coffescript，coffescript直接转换为javascript

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

---

我建立了这个扩展，这是一个更合适的解决这个问题的方法。它灵活且可重用，并且构建在jQuery之上。

---

或者你可以用焦点

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

---

虽然是从2011年开始的，但由于我广泛使用列表框，Primefaces面临着一个大问题

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

我通过创建一个JavaScript函数修复了这个问题

//此函数用于primefaces列表框，其中有许多项不使用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});
    }

---

在这种情况下，我将选择第5个元素。这是可行的，现在最糟糕的部分是：计算要滚动多少像素。我已经添加了代码和JSFIDLE，以了解如何滚动到特定元素；我已经在Firefox上测试过了你在Chrome上试过了吗？在那里对我不起作用。似乎与获取option元素的偏移量有关。在Safari 6中也不起作用。在选项上调用offset返回0表示顶部和左侧。在chrome版本49.0.2623.87 mIn chrome中工作正常。选择滚动框将自动滚动以突出显示所选项目，但不会进一步。您可以使用JavaScript选择然后取消选择某个特定选项以强制滚动。对于我来说，在Linux上使用Chrome 41时，如果在页面加载期间选择的是display:none，或者父项是display:none，则该选项不会自动滚动。即使css样式设置为display:something，例如，在body的onload期间，父集合display:block，它也不会正确滚动。设置后，将selectedIndex重新设置为自身，例如相关父级上的display:block，导致发生滚动。对我来说效果很好，但是您需要减去select本身的偏移量，即-$'select'。offset.top要滚动到列表顶部：$'select option:first'。FOCUS如果从引导模式执行此操作，则必须小心，因为计时将是一个问题。在显示的事件中进行此调用。

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

})();

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

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