title: Update selectedIndex options menu with JQuery.MSDropDown
body: <p>I'm using a <code>&lt;select&gt;</code> options menu with <a href="http://www.marghoobsuleman.com/jquery-image-dropdown" rel="nofollow">jQuery.msDropDown</a> but for some reason the DOM won't update after setting the <code>select.selectedIndex</code> property with javascript/jquery.</p>
  
  <p>After I click on the drop-down menu then click back on the page (to close it) it does update with the correct selectedIndex.</p>
  
  <p>I'm updating the selectedIndex in a loop like this:</p>
  
  <pre><code>    $.fn.[unrelated function].after = function( opts, curr, next, fwd ) {
          var $sel = document.getElementById('selectElem');
          for(var i = 0, j = $sel.options.length; i &lt; j; ++i) {
              if(($sel.options[i].value).substr(1) == next.title) {
                  //I have tried various ways here
                  $sel.selectedIndex = i;
                  //$('#selectElem').prop("selectedIndex",i);
                  break;
              }
          }
      };
  </code></pre>
  
  <p>P.S. there doesn't seem to be any documentation for <code>msDropDown</code> otherwise I would have tried to identify what event would trigger an update of the box.</p>