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

});


});

UI列表项目滚动以查看在HTML选择中选择的匹配选项。

1 个答案: