将下拉选择滚动条居中到所选项目答案

【问题标题】：Center a drop-down select scroll bar to the selected item将下拉选择滚动条居中到所选项目
【发布时间】：2013-11-20 15:44:16
【问题描述】：

我有一个包含大量项目的下拉选择器。我想在打开框时将其居中滚动，以使所选项目居中。

这是显示我想要的图片，但我希望在下拉列表选择器中执行此操作。

这是我正在使用的下拉列表的示例：

<select name="EndTime" id="endTime">
  <option value="00:00">12:00am</option>
  <option value="00:15">12:15am</option>
  <option value="00:30">12:30am</option>
  <option value="00:45">12:45am</option>
  <option value="01:00">1:00am</option>
  <option value="01:15">1:15am</option>
  <option value="01:30">1:30am</option>
  <option value="01:45">1:45am</option>
  <option value="02:00">2:00am</option>
  <option value="02:15">2:15am</option>
  <option value="02:30">2:30am</option>
  <option value="02:45">2:45am</option>
  <option value="03:00">3:00am</option>
  <option value="03:15">3:15am</option>
  <option value="03:30">3:30am</option>
  <option value="03:45">3:45am</option>
  <option value="04:00">4:00am</option>
  <option value="04:15">4:15am</option>
  <option value="04:30">4:30am</option>
  <option value="04:45">4:45am</option>
  <option value="05:00">5:00am</option>
  <option value="05:15">5:15am</option>
  <option value="05:30">5:30am</option>
  <option value="05:45">5:45am</option>
  <option value="06:00">6:00am</option>
  <option value="06:15">6:15am</option>
  <option value="06:30">6:30am</option>
  <option value="06:45">6:45am</option>
  <option value="07:00">7:00am</option>
  <option value="07:15">7:15am</option>
  <option value="07:30">7:30am</option>
  <option value="07:45">7:45am</option>
  <option value="08:00">8:00am</option>
  <option value="08:15">8:15am</option>
  <option value="08:30">8:30am</option>
  <option value="08:45">8:45am</option>
  <option value="09:00">9:00am</option>
  <option value="09:15">9:15am</option>
  <option value="09:30">9:30am</option>
  <option value="09:45">9:45am</option>
  <option value="10:00">10:00am</option>
  <option value="10:15">10:15am</option>
  <option value="10:30">10:30am</option>
  <option value="10:45">10:45am</option>
  <option value="11:00">11:00am</option>
  <option value="11:15">11:15am</option>
  <option value="11:30">11:30am</option>
  <option value="11:45">11:45am</option>
  <option value="12:00">12:00pm</option>
  <option value="12:15">12:15pm</option>
  <option value="12:30">12:30pm</option>
  <option value="12:45">12:45pm</option>
  <option value="13:00">1:00pm</option>
  <option value="13:15">1:15pm</option>
  <option value="13:30">1:30pm</option>
  <option value="13:45">1:45pm</option>
  <option value="14:00">2:00pm</option>
  <option value="14:15">2:15pm</option>
  <option value="14:30">2:30pm</option>
  <option value="14:45">2:45pm</option>
  <option value="15:00">3:00pm</option>
  <option value="15:15">3:15pm</option>
  <option value="15:30">3:30pm</option>
  <option value="15:45">3:45pm</option>
  <option value="16:00">4:00pm</option>
  <option value="16:15">4:15pm</option>
  <option value="16:30">4:30pm</option>
  <option value="16:45">4:45pm</option>
  <option value="17:00">5:00pm</option>
  <option value="17:15">5:15pm</option>
  <option value="17:30">5:30pm</option>
  <option value="17:45">5:45pm</option>
  <option value="18:00" selected="selected">6:00pm</option>
  <option value="18:15">6:15pm</option>
  <option value="18:30">6:30pm</option>
  <option value="18:45">6:45pm</option>
  <option value="19:00">7:00pm</option>
  <option value="19:15">7:15pm</option>
  <option value="19:30">7:30pm</option>
  <option value="19:45">7:45pm</option>
  <option value="20:00">8:00pm</option>
  <option value="20:15">8:15pm</option>
  <option value="20:30">8:30pm</option>
  <option value="20:45">8:45pm</option>
  <option value="21:00">9:00pm</option>
  <option value="21:15">9:15pm</option>
  <option value="21:30">9:30pm</option>
  <option value="21:45">9:45pm</option>
  <option value="22:00">10:00pm</option>
  <option value="22:15">10:15pm</option>
  <option value="22:30">10:30pm</option>
  <option value="22:45">10:45pm</option>
  <option value="23:00">11:00pm</option>
  <option value="23:15">11:15pm</option>
  <option value="23:30">11:30pm</option>
  <option value="23:45">11:45pm</option>
</select>

【问题讨论】：

你为什么要这个？
你能发布一些相关的当前代码吗？您可以通过选择列表下方 5-6 位的值（有效地将您的原始选择置于中心）然后返回原始值来执行此操作。
我使用下拉菜单根据特定粒度选择一天中的时间。项目已排序。当前，所选项目是列表打开时显示的最后一个项目，因此如果用户想稍后选择，则必须向下滚动。在代码方面，没有什么可展示的。这是一个

标签： javascript html css

【解决方案1】：

我确信有更好的方法可以做到这一点，但它确实有效

HERE

$('#listF').click(function() {
    var n = 10;
    var val = this.selectedIndex;
    if ((this.selectedIndex < ($(this).find('option').length - n)) && (this.selectedIndex > n)) {
        this.selectedIndex += n;
        this.selectedIndex -= (2 * n);
        this.selectedIndex += n;
    } else {
        this.selectedIndex = ((this.selectedIndex<n)?0:99);
        this.selectedIndex = val;
    }
});

编辑：在更新 selectedIndex 之前添加检查，以便您也可以选择最后 n( 10 个) 项目。

Edit2：修复 rolfv1 指出的错误

【讨论】：

漂亮而简单。谢谢！但是有一个小错误：如果您在最后 10 个项目中选择一个，它将最终没有选择。
是的，我没注意到。我现在已经修好了。 Updated Fiddle
我刚刚意识到这个（以及我自己的解决方案）有一个问题，它只有在您选择当前项目下方的项目时才有效，而不是当您在列表中上升时。此外，当前的错误修复只是在您太靠近列表末尾时停止整个原理，这也可以修复，使所选项目尽可能靠近中间。（只需选择第 93 项即可了解我的意思）
你说得对，我也没有注意到。 Here是固定版本

【解决方案2】：

我做了这个小例子来告诉你如何做到这一点，你基本上要做的是，当你在中间有所需的项目时，你首先选择将在列表底部的项目，所以在您的图像，首先选择项目“T3”，然后选择实际需要的项目，以这个 Fiddle 为例：

http://jsfiddle.net/rolfv1/RZeLN/1/

<form name="form">
<select size=6 name="list">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
    <option value="e">e</option>
    <option value="f">f</option>
    <option value="g">g</option>
    <option value="h">h</option>
    <option value="i">i</option>
    <option value="j">j</option>
    <option value="k">k</option>
    <option value="l">l</option>
    <option value="m">m</option>
</select>

<input type="button" onclick="choose();" value="select" />
</form>

而本例中的测试函数就是：

function choose(){
     document.form.list.value="k";  
     document.form.list.value="i"; 
}

当然，脚本和一切都必须根据您的需要进行调整，但它显示了我希望的想法

【讨论】：

我接受了另一个答案，因为他是您的通用版本。无论如何，谢谢！

【解决方案3】：

所以正如我在评论中提到的，我稍微升级了 tewathia 的脚本（所以大部分功劳归他所有），所以现在脚本在列表中上下导航时都可以工作，它总是会尝试放置被选中的项目尽可能靠近中心：

$('#listF').click(function(){
    var n = 10;
    if(this.selectedIndex+n+1 > ($(this).find('option').length)){
        n=$(this).find('option').length-this.selectedIndex-1;
    }
    if(this.selectedIndex < n){
        n=this.selectedIndex;
    }
    this.selectedIndex-=n;
    this.selectedIndex+=2*n;
    this.selectedIndex-=n;
});

【讨论】：

谢谢，我最终根据您的两个 cmets 编写了自己的修复程序。 jsfiddle.net/VFv4B 这和你的很相似。不过你的更简洁一些。