下拉自动滚动到所选数据答案

【问题标题】：Drop down automatic scroll to selected data下拉自动滚动到所选数据
【发布时间】：2013-12-19 04:30:04
【问题描述】：

我有一个使用<li> 方法的下拉列表。选择数据并突出显示所选数据没有显示问题。默认情况下，最近（将来）时间将显示在输入中。我希望 onclick 在输入（第一次），它显示下拉列表，并自动转到（滚动到）相应的值（最近（将来）时间）。

就像点击输入，然后选择数据（例如：23:00），然后关闭列表。而当你再次点击输入时，列表会显示出来，并且会在最后自动滚动显示之前选择的数据（23:00）。

希望你能明白我的意思。

这是我的 jsfiddle drop down list

谢谢。

【问题讨论】：

所以澄清一下；你想要的是让它自动滚动到当前时间？
我认为这可以帮助解决您的问题。 stackoverflow.com/a/2906009/1572987
如果你想知道他们的当地时间，也许可以看这里：stackoverflow.com/questions/660927/…

标签： javascript jquery html css

【解决方案1】：

试试这个代码

$('#textin1').click(function() {
        var pos = $('#textin1').offset();
        pos.top += $('#textin1').width();

        $('#dropdown').fadeIn(100);
       $('#dropdown').scrollTop($('#dropdown').find('li:contains("'+$('#textin1').val()+'")').position().top);
        return false;
    });

见 js fiddle http://jsfiddle.net/w9j5N/1/

【讨论】：

@user 缓存你的选择器var $el = $('#element');

【解决方案2】：

LIVE DEMO

这个会的；

读取当前时间
UL 将以漂亮的幻灯片出现
UL 将滚动到与时间相关的LI，并将其设置在视图中心
丑陋的滚动条只会出现在UL hover

改进的 jQuery：

$(function(){ // DOM ready

  var $dd = $('#dropdown');
  var $t1 = $('#textin1');
  var $currHoursLI = $('li', $dd).eq( new Date().getHours() );
                                 // or use manually  i.e. .eq(23) to test

  $t1.click(function( e ) {
    e.stopPropagation();      
    var dH = $dd.height();
    var pos = $(this).offset(); 
    pos.top += $(this).width();   
    $currHoursLI.addClass('selected'); 
    $dd.stop().slideDown(200, function(){
       var liPos = $currHoursLI.position().top;
      $(this).animate({scrollTop : liPos-dH+dH/2}, 500);
    });      
  });

  $('li', $dd).click(function() {
    $t1.val($(this).text());
    $('li', $dd).removeClass('selected');
    $(this).addClass('selected').parent($dd).slideUp(200);
  });

  //to hide listing when on click anywhere
  $(document).click(function(e) {
    var t = e.target;
    if (!$(t).is($t1) && !$(t).parents().is($t1))$dd.slideUp(200);
  });

});

稍微好一点的 CSS：

#dropdown {    
    margin:0;
    padding:0;
    position:absolute;
    display:none;
    border:1px solid #A4A4A4;
    width:100px;
    height:200px;
    background:#f9f9f9;
    text-align:center;
    list-style:none;
    overflow:hidden;
}
#dropdown:hover{
    overflow-y:scroll;
}
#dropdown li:hover, #dropdown .selected{
    background:#ccc; 
    cursor:pointer; 
}

【讨论】：