title: jQuery setting prop("selected", true) on multi select list in Chrome only works once
body: <p>When trying to set a select list option to selected in order to <strong>scroll the select list to that option</strong>, it works in all browsers except for Chrome. In Chrome <strong>it works once</strong>, but successive times do not work in Chrome. How can I ensure that setting the selected attribute of an option in a select list will scroll that option into view?</p>
  
  <p>Here is an example of my issue - <a href="http://jsfiddle.net/Z2rQG/" rel="noreferrer">http://jsfiddle.net/Z2rQG/</a></p>
  
  <p>The code I am using to select an option in a list to scroll it into to view is as follows:</p>
  
  <pre><code>(function ($) {
      $.fn.scrollToOption = function (option) {
          var _option = $(option, this);
          // if option is in list
          if(_option) {
              // store the selection state
              var isSelected = _option.is(":selected");
  
              _option.prop("selected", true); // scroll to the option
              _option.prop("selected", isSelected);  // restore the selection state
          }
          return this;
      };
  })(jQuery); 
  </code></pre>
  
  <p><strong>Edit:</strong> I have also tried the <a href="http://archive.plugins.jquery.com/project/ScrollTo" rel="noreferrer">scrollTo</a> jQuery plugin, which does not work as well in Chrome. Here is an example - <a href="http://jsfiddle.net/kavun/TW4XK/" rel="noreferrer">http://jsfiddle.net/kavun/TW4XK/</a></p>
  
  <p><strong>Edit:</strong> Here is a clearer example of what I am trying to do. Select two options from a select list and have the list be scrolled to the last selected option. This works in all browsers except Chrome and Safari. In Chrome the first selection scrolls to the option but the second <code>$('#select option[value=""].prop('selected', true);</code> <strong>does not scroll the list</strong> - <a href="http://jsfiddle.net/kavun/uhnZH/" rel="noreferrer">http://jsfiddle.net/kavun/uhnZH/</a></p>