title: Use jQuery to change a second select list based on the first select list option
body: <p>I have two selects:</p>
  
  <pre><code>&lt;select name="select1" id="select1"&gt;
      &lt;option value="1"&gt;Fruit&lt;/option&gt;
      &lt;option value="2"&gt;Animal&lt;/option&gt;
      &lt;option value="3"&gt;Bird&lt;/option&gt;
      &lt;option value="4"&gt;Car&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="select2" id="select2"&gt;
      &lt;option value="1"&gt;Banana&lt;/option&gt;
      &lt;option value="1"&gt;Apple&lt;/option&gt;
      &lt;option value="1"&gt;Orange&lt;/option&gt;
      &lt;option value="2"&gt;Wolf&lt;/option&gt;
      &lt;option value="2"&gt;Fox&lt;/option&gt;
      &lt;option value="2"&gt;Bear&lt;/option&gt;
      &lt;option value="3"&gt;Eagle&lt;/option&gt;
      &lt;option value="3"&gt;Hawk&lt;/option&gt;
      &lt;option value="4"&gt;BWM&lt;option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>How do I do that with jQuery if I choose Fruit in the first select? The second select would show me only Fruits - Banana, Apple, Orange. If I choose Bird in the first select, the second select would show me only Birds - Eagle, Hawk. And so on...</p>
  
  <p>I tried to do it with this piece of jQuery code:</p>
  
  <pre><code>$("#select1").change(function() {
      var id = $(this).val();
      $('#select2 option[value!='+id+']').remove();
  });
  </code></pre>
  
  <p>Unfortunately, it removes almost everything, and I have no idea how to bring back some options. I also read something about clone, but I don't know how to use it in this case.</p>