UI列表项滚动到在HTML选择中选择匹配选项的视图。

Question

我已经完成了这段代码，但是它的行为是未定义的。它对一些列表项目工作良好。提前致谢。 您可以检查的jsfiddle链接http://jsfiddle.net/amitv1093/5uwfky4n/

----- ----- HTML

<select id="sel"> 
    <option value="Volvo">Volvo</option> 
    <option value="Saab">Saab</option> 
    <option value="Mercedes">Mercedes</option> 
    <option value="Audi">Audi</option> 
    <option value="Maruti">Maruti</option> 
    <option value="Tata">Tata</option> 
    <option value="Ferrari">Ferrari</option> 
</select> 

<div> 
<ul> 
<li data-val="Volvo" > Volvo </li> 
<li data-val="Audi"> Audi</li> 
<li data-val="Saab" > Saab </li> 
<li data-val="Mercedes"> Mercedes </li> 
<li data-val="Maruti"> Maruti </li> 
<li data-val="Tata"> Tata </li> 
<li data-val="Ferrari"> Ferrari</li> 
</ul> 
</div> 

--- CSS ---

div 
{ 
    height:50px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 
.red 
{ 
    color:red; 
} 

--- JS ---

$(document).ready(function() 
{ 
//var ulList ; 


    $('#sel').change(function() { 

      var selList = $(this).val(); 

       $("ul li").each(function() 
      { 
      console.log($(this).data("val")); 
      console.log($(this).offset().top); 
      if(selList == $(this).data("val")) 
      { 
       $(this).addClass("red"); 



       $("div").animate({ 
      scrollTop: $(this).position().top 
     }, 600); 
      } 
      else 
      { 

      $(this).removeClass("red"); 
      } 




      });  

    }); 


    }); 

Answer 1

这样做的兄弟。并检查该http://jsfiddle.net/5uwfky4n/2/

$(document).ready(function() 
{ 
//var ulList ; 


$('#sel').change(function() { 

     var selListIndex = $(this)[0].selectedIndex; 
     var myCar = $(this).val(); 
     console.log(selListIndex) 
     $('li').removeClass('red'); 
     $('#'+myCar).addClass('red'); 
     var scrollTome =selListIndex * parseInt($('li').height()); 
     $("div").animate({ 
     scrollTop: scrollTome 
     }, 600); 

}); 


});