javascript - Drop down automatic scroll to selected data - Stack Overflow

admin管理员组

文章数量:1415062

I have a drop down list using <li> method. I have no display problem selecting the data and highlighting the selected data. By default, the nearest (in future) time will be displayed the input. I want that onclick on the input (for the first time), it shows the drop down list, and automatically go to (scroll to) the respective value (the nearest (in future) time).

Just like when you click on the input, then choose the data (eg: 23:00), then close the list. And when you click again on the input, the list will display, and it will automatically scroll at the end to show the previously selected data (23:00).

Hopefully you can understand what i mean.

Here my jsfiddle drop down list

Thanks.

I have a drop down list using <li> method. I have no display problem selecting the data and highlighting the selected data. By default, the nearest (in future) time will be displayed the input. I want that onclick on the input (for the first time), it shows the drop down list, and automatically go to (scroll to) the respective value (the nearest (in future) time).

Just like when you click on the input, then choose the data (eg: 23:00), then close the list. And when you click again on the input, the list will display, and it will automatically scroll at the end to show the previously selected data (23:00).

Hopefully you can understand what i mean.

Here my jsfiddle drop down list

Thanks.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 4, 2018 at 7:51 Quick learner 11.5k44 gold badges5151 silver badges6161 bronze badges asked Dec 19, 2013 at 4:30 user2699175user2699175 1,07922 gold badges1010 silver badges1616 bronze badges 3

• So to clarify; what you want is for it to scroll to the current time automatically? – Ampersand Commented Dec 19, 2013 at 4:35
• I think this can help to solve your problem. stackoverflow./a/2906009/1572987 – errorare Commented Dec 19, 2013 at 4:41
• And maybe look here if you want to find their local time: stackoverflow./questions/660927/… – Ampersand Commented Dec 19, 2013 at 4:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

try this code

$('#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;
    });

See js fiddle http://jsfiddle/w9j5N/1/

LIVE DEMO

This one will;

• read the current time
• the UL will appear with a nice slide
• theUL will scroll to that time-respective LI setting it in the view-center
• and the ugly scrollbars will appear only on UL hover

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

});

Slightly better 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; 
}

本文标签： javascriptDrop down automatic scroll to selected dataStack Overflow