将下拉选择滚动条居中到所选项目 [英] Center a drop-down select scroll bar to the selected item

问题描述

我有一个带有大量项目的下拉选择器。

这里有一个图片来显示我想要的东西，除了我想要的东西， m在下拉列表选择器中执行此操作。

下面是我使用的下拉列表的示例：

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

解决方案

我确定有一个更好的方法，但它是工作

这里

  $（'＃listF'）click（function（）{
 var n = 10; 
 var val = this.selectedIndex; 
 if 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） ; 
 this.selectedIndex = val; 
} 
}）; 
  

编辑：在更新selectedIndex之前添加检查，以便可以选择最后一个n

Edit2：修复rolfv1指出的错误

I have a drop-down selector with a large amount of items. I want to center scroll the box when it gets opened to have the selected item centered in the middle of it.

Here's a picture to show what I want, except I'm looking to do this in a drop-down list selector.

Here's an example of the dropdown I'm using:

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

解决方案

I'm sure there's a better way of doing this, but it does work

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

Edit: Adding a check before updating the selectedIndex so that you can select the last n( 10 here) items as well.

Edit2: Fixing the bug pointed out by rolfv1

这篇关于将下拉选择滚动条居中到所选项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！