Ul 列表项滚动查看，并在 HTML Select 中选择了匹配选项。

Question

我已经完成了这段代码，但它的行为 undefined.Its 对某些列表项很有效。提前致谢。你可以检查 jsfiddle link 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);

});


});

Ul 列表项滚动查看，并在 HTML Select 中选择了匹配选项。

Ul list Item scroll to view with matching option selected in HTML Select.

jquery

scrolltop