Question

我有一个包含大量项目的下拉选择器。我希望在打开框时将滚动框放在中心，使所选项目位于其中间。

这是一张显示我想要的图片，除了我想在下拉列表选择器中执行此操作。

example

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

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

Answer 1

我做了一个小例子，让你知道如何做到这一点，你基本上做的是当你在中间有所需的项目时，你首先选择列表底部的项目，所以在您的图像，首先选择项目“T3”，然后选择实际所需的项目，请将此小提琴视为示例：

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

当然，脚本和所有内容都必须根据您的需求进行调整，但它显示了我希望的想法

Answer 2

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

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指出的错误

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

将下拉选择滚动条居中放置到所选项目

3 个答案: