title: sort select box options by inline css attributes (Jquery)
body: <p>i have the following select box and want to sort it by <code>display:none</code> inlne attribute , that all the options which donot have <code>display:none</code> attribute will show at top and and rest of options will be showed after them . How to do this in jquery ?</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>&lt;select id="changeme"&gt; 
  
  &lt;option style="display:none;"&gt;1&lt;/option&gt;
  &lt;option&gt;2&lt;/option&gt;
  &lt;option&gt;3&lt;/option&gt;
  &lt;option style="display:none;"&gt;4&lt;/option&gt;
  &lt;option&gt;5&lt;/option&gt;
  &lt;option style="display:none;"&gt;6&lt;/option&gt; 
  &lt;option&gt;7&lt;/option&gt; 
  &lt;option style="display:none;"&gt;8&lt;/option&gt;
  
  
  &lt;/select&gt;
  </code></pre>
  
  <p>i know that the options that have attribute <code>display:none</code> will not show but i want that my rendered html will look like this </p>
  
  <pre><code>&lt;select id="changeme"&gt; 
  
  
  &lt;option&gt;2&lt;/option&gt;
  &lt;option&gt;3&lt;/option&gt;
  &lt;option&gt;5&lt;/option&gt;  
  &lt;option&gt;7&lt;/option&gt; 
   &lt;option style="display:none;"&gt;4&lt;/option&gt;
   &lt;option style="display:none;"&gt;6&lt;/option&gt;
   &lt;option style="display:none;"&gt;1&lt;/option&gt;
   &lt;option style="display:none;"&gt;8&lt;/option&gt;
  
  
   &lt;/select&gt;
  </code></pre>