title: Add selected attribute to option in select menu with jQuery
body: <p>I'm making a select menu plugin to replace the ugly default selects and be consistent across different OS.</p>
  
  <p>Here's the demo (only firefox and webkit)<br>
  <a href="http://spacirdesigns.com/selectMenu/" rel="noreferrer">http://spacirdesigns.com/selectMenu/</a></p>
  
  <p>It's already working, but I'm having problems assigning the "selected" attribute to the option. The code works with any other attribute but I can't get it to work with the selected attribute.</p>
  
  <p>This works:</p>
  
  <pre><code>select.find('option')
      .removeAttr('whatever')
      .eq(index).attr('whatever', 'hello');
  </code></pre>
  
  <p>This doesn't:</p>
  
  <pre><code>select.find('option')
      .removeAttr('selected')
      .eq(index).attr('selected', 'selected');
  </code></pre>
  
  <p>And here's the code so far:</p>
  
  <pre><code>(function($){
  
          $.fn.selectMenu = function() {
  
              var select = this;
              select.hide();
  
              var title = select.attr('title');
              var arrow = 'img/arrow.png';
              var items = '';
  
              select
                  .children('option')
                  .each(function(){
                      var item = $(this).text();
                      if ($(this).val() != '') { 
                          $(this).attr('value', item);
                      }
                      items += '&lt;li&gt;' + item + '&lt;/li&gt;'
                  });
  
              var menuHtml =
                  '&lt;ul class="selectMenu"&gt;' + 
                  '&lt;img src="' + arrow + '" alt=""/&gt;' +
                  '&lt;li&gt;' + title + '&lt;/li&gt;' +
                  '&lt;ul&gt;' + items  + '&lt;/ul&gt;' +
                  '&lt;/ul&gt;';
  
              select.after(menuHtml);
  
              var menu = $(this).next('ul');
              var list = menu.find('ul');
  
              menu
                  .hover(function(){}, function(){
                      list.hide();
                  })
                  .children('li').hover(function(){
                      list.show();
                  });
  
              menu.find('ul li').click(function(){
                  var index = $(this).index();
                  menu.children('li').text($(this).text());
                  select.find('option')
                      .removeAttr('selected')
                      .eq(index).attr('selected', 'selected');
                  list.hide();
              });
  
          };
  
      })(jQuery);
  </code></pre>