title: Change Style of Specific Option in SelectMenu Using jQuery
body: <p>I'm trying to modify some existing code. I want to use jQuery to change the style of some items in a dropdownlist.</p>
  
  <p>I have my dropdownlist structured like this:</p>
  
  <pre><code>&lt;select name="dept" id="dept"&gt;
    &lt;option value="01"&gt;DeptA&lt;/option&gt;
    &lt;option value="02"&gt;DeptB&lt;/option&gt;
    &lt;option value="03" class="station"&gt;DeptC&lt;/option&gt;
    &lt;option value="04" class="station"&gt;DeptD&lt;/option&gt;
    &lt;option value="05" class="station"&gt;DeptE&lt;/option&gt;
    &lt;option value="06" class="station"&gt;DeptF&lt;/option&gt;
    &lt;option value="07" class="station"&gt;DeptG&lt;/option&gt;
    &lt;option value="08"&gt;DeptH&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I want to be able to change the font color or the background color of the option that has <code>class="station"</code> (aka. DeptC-G).</p>
  
  <p>I tried the below method:</p>
  
  <pre><code>&lt;script&gt;
  $(function() {    
    $( "#dept" ).selectmenu().selectmenu( "menuWidget" );
    /*$( "option" ).each(function() {
      if ( $( this ).hasClass("station") ) {
        //alert(this.text);
        $(this).addClass("testClass");
      }
    });*/
  });
  &lt;/script&gt;
  
  &lt;style&gt;
    .testClass
    {
      color:blue;
      background:pink;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>The commented section does not work, it will do the alert part, but the style was never applied.</p>
  
  <p>I tried to use </p>
  
  <pre><code>$("#dept").selectmenu().selectmenu( "menuWidget" ).addClass("testClass");
  </code></pre>
  
  <p>but this will apply the style to every options instead of the specific ones.</p>
  
  <p>I had done some research and I found <a href="https://stackoverflow.com/questions/13345003/jquery-selectmenu-how-to-style-some-options-differently">this</a> which from the question looks very similar to what I'm looking for. However, I tried the given solutions none of them work for me. No errors, just no style was applied.</p>
  
  <p>Any help is appreciated :)</p>
  
  <p><strong>EDIT_01:</strong></p>
  
  <p>This is how it looks like in IE11, the list shift based on the original selection. (I know this is how IE11 render dropdownlist, but we are going to change it)</p>
  
  <p><img src="https://i.stack.imgur.com/vHGBP.png" alt="enter image description here"></p>
  
  <p>We will need the dropdownlist to look like what it's like in IE8, like below. And somehow the style was not applied.</p>
  
  <p><img src="https://i.stack.imgur.com/w8ZpX.png" alt="enter image description here"></p>