title: Ul list Item scroll to view with matching option selected in HTML Select.
body: <p>I have done this code but its behavior is undefined.Its working good for some        list item. Thanks in advance.
     you can check jsfiddle link <a href="http://jsfiddle.net/amitv1093/5uwfky4n/" rel="nofollow noreferrer">http://jsfiddle.net/amitv1093/5uwfky4n/</a></p>
  
  <p>-----html-----</p>
  
  <pre><code> &lt;select id="sel"&gt;
    &lt;option value="Volvo"&gt;Volvo&lt;/option&gt;
    &lt;option value="Saab"&gt;Saab&lt;/option&gt;
    &lt;option value="Mercedes"&gt;Mercedes&lt;/option&gt;
    &lt;option value="Audi"&gt;Audi&lt;/option&gt;
    &lt;option value="Maruti"&gt;Maruti&lt;/option&gt;
    &lt;option value="Tata"&gt;Tata&lt;/option&gt;
    &lt;option value="Ferrari"&gt;Ferrari&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div&gt;
   &lt;ul&gt;
   &lt;li data-val="Volvo" &gt; Volvo &lt;/li&gt;
   &lt;li data-val="Audi"&gt;  Audi&lt;/li&gt;
   &lt;li data-val="Saab" &gt; Saab &lt;/li&gt;
   &lt;li data-val="Mercedes"&gt;  Mercedes &lt;/li&gt;
   &lt;li data-val="Maruti"&gt;  Maruti &lt;/li&gt;
   &lt;li data-val="Tata"&gt;  Tata &lt;/li&gt;
   &lt;li data-val="Ferrari"&gt; Ferrari&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>---css---</p>
  
  <pre><code>div
  {
    height:50px;
    overflow-y: scroll;
      overflow-x: hidden;
  }
  .red
  {
    color:red;
  }
  </code></pre>
  
  <p>---js---</p>
  
  <pre><code>$(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");
              }
  
  
  
  
            });     
  
      });
  
  
      });
  </code></pre>