【问题标题】:jQuery scrollTop in <select> is not working in Chrome and IE<select> 中的 jQuery scrollTop 在 Chrome 和 IE 中不起作用
【发布时间】:2012-06-28 16:38:36
【问题描述】:

我有这个 jQuery JS fiddle,它在 FF 13 中运行良好,但在 IE7/8/9 和 Chrome 中运行良好。

http://jsfiddle.net/kj9p4/114/

基本上,我想输入一个文本框并滚动到列表中的一个项目,该项目具有我刚刚键入的值。这是 HTML:

<input type="text" name="t" id="t" />
</br>    
<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>
       <option value="7">value 7</option> 
       <option value="8">value 8</option> 
       <option value="9">value 9</option> 
       <option value="10">value 10</option>            
 <select> 

这是 JS:

$(document).ready(function (){
    $("#t").keyup(function () {
        scrollToElement();                
    });
});


function scrollToElement(){
    var $s = $('select');
    var v = $("#t").val();

    var ele = $s.find('[value="'+v+'"]');
    var optionTop = $s.find('[value="'+ v +'"]').offset().top;       
    var selectTop = $s.offset().top;    
    $s.scrollTop($s.scrollTop() + (optionTop - selectTop));
}

​ 有没有人有同样的经历?为什么 jQuery 在 Chrome 和 IE 中不起作用?

【问题讨论】:

标签: jquery select scroll scrolltop


【解决方案1】:

“基本上,我想输入一个文本框并滚动到列表中的一个项目,该项目具有我刚刚键入的值”下面的代码将满足您的需求

$(document).ready(function (){
    $("#t").keyup(function () {
        scrollToElement();                
    });
});


function scrollToElement(){ 
    var s = $('select');
    var t =$('#t').val();
    var option = t - 1;
   s.find('option:eq('+option+')').attr('selected','selected');
}

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2019-08-28
  • 2011-10-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-01-16
  • 2015-10-08
  • 2011-02-20
相关资源
最近更新 更多