如何使用JavaScript或jQuery滚动选择列表？ [英] How to scroll a select list with JavaScript or jQuery?

问题描述

我有一个选择标签：

 < select size =3> 
< option value =1>值1< / option> 
< option value =2>值2< / option> 
< option value =3>值3< / option> 
< option value =4>值4< / option> 
< option value =5>值5< / option> 
< option value =6>值6< / option> 
< select> 
  

现在显示前3个选项，
如何滚动查看3- 5或4-6使用jQuery或纯JavaScript？

解决方案

.scrollTop（）可以工作：

$ $ $ $ $'''。'。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中无法使用。

I have a select tag:

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

Now it displays first 3 options, how can I scroll to see elements from 3-5 or 4-6 using jQuery or pure JavaScript?

解决方案

.scrollTop() may work:

$('select').scrollTop(30);

And you can scroll to a particular element using this:

var $s = $('select');

var optionTop = $s.find('[value="3"]').offset().top;
var selectTop = $s.offset().top;

$s.scrollTop($s.scrollTop() + (optionTop - selectTop));

Try it here: http://jsfiddle.net/kj9p4/

Note: does not work in Chrome.

这篇关于如何使用JavaScript或jQuery滚动选择列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！