Question

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

就像点击输入一样，然后选择数据（例如：23：00），然后关闭列表。当您再次单击输入时，将显示列表，它将自动滚动到末尾以显示先前选择的数据（23:00）。

希望你能理解我的意思。

这里是我的jsfiddle drop down list

感谢。

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

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

下拉自动滚动到所选数据

2 个答案: