title: jQuery and css: hide/show select options with a certain css class
body: <p>In the html code I have select options like this:</p>
  
  <pre><code>  &lt;option value="1" class="myclass5"&gt;Value1&lt;/option&gt;
  </code></pre>
  
  <p>In jQuery:</p>
  
  <pre><code>var cod = $(this).val(); // This is the value of another select: when the value 
  $("option[class^=myclass]").hide();
  $("option[class^=myclass]").each(function () {
      $("option[class^=myclass" + cod + "]").show();
  });
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I have two select. When I select a value in the first select, the second one must be populated accordingly (I have to prevent an ajax call).</p>
  
  <p>I put all the second select values in a session var, but my problem is in selecting only those ones tied to the first select, so I was trying through css classes.</p>
  
  <p><strong>EDIT2</strong></p>
  
  <pre><code>&lt;select name="firstselect"&gt;
     &lt;option value="0" selected="selected"&gt;Choose...&lt;/option&gt;
     &lt;option value="1"&gt;Value1&lt;/option&gt;
     &lt;option value="2"&gt;Value2&lt;/option&gt;
     &lt;option value="3"&gt;Value3&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="secondselect"&gt;
     &lt;option value="0" selected="selected"&gt;Choose...&lt;/option&gt;
     &lt;option value="myclass1"&gt;Value11&lt;/option&gt;
     &lt;option value="myclass1"&gt;Value12&lt;/option&gt;
     &lt;option value="myclass1"&gt;Value13&lt;/option&gt;
     &lt;option value="myclass2"&gt;Value21&lt;/option&gt;
     &lt;option value="myclass2"&gt;Value22&lt;/option&gt;
     &lt;option value="myclass2"&gt;Value23&lt;/option&gt;
     &lt;option value="myclass3"&gt;Value31&lt;/option&gt;
     &lt;option value="myclass3"&gt;Value32&lt;/option&gt;
     &lt;option value="myclass3"&gt;Value33&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>EDIT3</strong></p>
  
  <p>For me greenish's solution is good, but there is an issue on IE that I don't succeed in explaining: when I use the back button, the user selected value is "lost", that is, if I log on the console the user selected value, I see its "index" in the new cloned select. In the html source code, there is the whole original select.</p>
  
  <p><strong>EDIT4</strong></p>
  
  <p>I resolved thanks to this post</p>
  
  <p><a href="https://forum.jquery.com/topic/jquery-select-box-selectedindex-problems-in-internet-explorer-ie-on-refresh-and-back-buttons" rel="noreferrer">https://forum.jquery.com/topic/jquery-select-box-selectedindex-problems-in-internet-explorer-ie-on-refresh-and-back-buttons</a></p>