title: iOS Bug? Unable to change text in a select when focused using jQuery
body: <p>I am using a select with optgroups for some navigation on mobile devices. I use the optgroup's label to indicate the section it belongs in - and then the option itself to designate the sub-section.</p>
  
  <p>The problem is that in pretty much every browser I come across doesn't show the optgroup when the select is not in focus. I got around this by writing the following jQuery:</p>
  
  <pre><code>$(".Nav-Interior-Mobile select option:selected").each( function() {
      pageGroupLabel = $(this).parent('optgroup').attr('label');
      pageItemLabel = $(this).text();
      $(this).text(pageGroupLabel + " &gt; " + pageItemLabel);
  });
  $('.Nav-Interior-Mobile select').focus( function() {
      $(this).find('option:selected').text(pageItemLabel); 
  });
  $('.Nav-Interior-Mobile select').blur( function() {
      $(this).find('option:selected').text(pageGroupLabel + " &gt; " + pageItemLabel); 
  });
  </code></pre>
  
  <p>This appears to work in everything but iOS. In iOS the UI to change a select doesn’t reflect the new text that gets used on focus. I can see the actual select above Apple's UI changing - but their UI doesn’t change at all. </p>
  
  <p>Anyone have an idea of how to do this?</p>
  
  <p>Here it is working when blurred: </p>
  
  <p><img src="https://i.stack.imgur.com/WDXX6.png" alt="http://files.secondstreetmedia.com/support/todd/blurred.PNG"></p>
  
  <p>And not working when focused (their UI still has "Branding > Web" when it should just say "Web"):</p>
  
  <p><img src="https://i.stack.imgur.com/3gw3O.jpg" alt="http://files.secondstreetmedia.com/support/todd/focused-2.jpg"></p>
  
  <hr>
  
  <p>This absolutely has to be a bug - if you scroll down and then back up in the list - the text is then changed - bizarre.</p>