title: hide dropdown option on change of another dropdown option
body: <p>I have tried this, but not working fine. HTML:</p>
  
  <pre><code> &lt;div&gt;
   &lt;select id="color" name="color" onchange="myFunction()"&gt;                
      &lt;option value=""&gt; choose options &lt;/option&gt;                
      &lt;option value="1"&gt;AB&lt;/option&gt;
      &lt;option value="2"&gt;ABC&lt;/option&gt;
      &lt;option value="3"&gt;ABCD&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id="size" name="size" &gt;             
      &lt;option value=""&gt; choose options &lt;/option&gt;
      &lt;option value="3" class="27"&gt;Apple &lt;/option&gt;
      &lt;option value="2" class="26"&gt;Orange&lt;/option&gt;
      &lt;option value="2" class="26"&gt;Orange&lt;/option&gt;
      &lt;option value="2" class="26"&gt;Orange&lt;/option&gt;
      &lt;option value="3" class="28"&gt;Grapes&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SCRIPT:</p>
  
  <pre><code>function myFunction()
  {
     $variable=$("#size").html();
     $("#size").html($variable); 
     var val=$("#color").find(":selected").val();
     $("#size option[value!="+val+"]").remove();
  }
  </code></pre>
  
  <p>in place of .remove() I tried .hide() which seems to be not working. Could anyone help me out with this?</p>