title: jQuery set select box to empty option
body: <p>This is the jQuery code that I am using which helps me in getting the values for a select box I need when I change the first select box.</p>
  
  <pre><code>$(document).ready(function () {
      $("#select1").change(function(){
        $('.quantity').val('');
        $('#trblock').fadeIn();
        if ($(this).data('options') == undefined) {
          $(this).data('options', $('#select2 option').clone());
        }
        var id = $(this).val();
        var options = $(this).data('options').filter('[value=' + id + ']');
        $('#select2').html('&lt;option value=""&gt;').append(options);
      });
  });
  </code></pre>
  
  <p>What happens here is that whenever I change the select box value from 1st select box I get some values in the second select box. But when I roll back to the previously selected option in the 1st text box I find that the 2nd select box is already showing the options which I selected previously. What I want is whenever I change selecting the 1st select box option the 2nd select box should start with a blank option like <code>&lt;option value=""&gt;&lt;/option&gt;</code> instead of the previously selected option in 2nd select box.</p>
  
  <p>To make it easy I roll it in points.</p>
  
  <ol>
  <li><p>Selected an option in 1st select box example "Animals".</p>
  
  <p><code>&lt;select name="" id="select1"&gt;
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;option value="1"&gt;Animals&lt;/option&gt;
      &lt;option value="2"&gt;Games&lt;/option&gt;
      &lt;option value="3"&gt;Fruits&lt;/option&gt;
  &lt;/select&gt;</code></p></li>
  <li><p>Got some values in 2nd select box.</p>
  
  <p><code>&lt;select name="" id="select2"&gt;
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;option value="1"&gt;Cat&lt;/option&gt;
      &lt;option value="2"&gt;Dog&lt;/option&gt;
      &lt;option value="3"&gt;Monkey&lt;/option&gt;
  &lt;/select&gt;</code></p></li>
  <li><p>Selected a value from the 2nd select box example "Dog".</p></li>
  <li><p>Then I thought to switch the selection from 1st select box so I selected "Fruits".</p></li>
  <li><p>Got some values in 2nd select box.</p>
  
  <p><code>&lt;select name="" id="select2"&gt;
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;option value="1"&gt;Apple&lt;/option&gt;
      &lt;option value="2"&gt;Banana&lt;/option&gt;
      &lt;option value="3"&gt;Grapes&lt;/option&gt;
  &lt;/select&gt;</code></p></li>
  <li><p>I selected grapes this time. Ok, fine till here.</p></li>
  <li><p>But then if I again change my 1st selection to animals I should get the 2nd select box to start with the empty option (blank field) but Instead it starts with the previously selected "Dog". This is what I DO NOT want. Each time I change selecting the option from 1st select box I want second select box to start with the blank option field so that I can again choose from the full list i.e., "Cat", "Dog", "Monkey".</p></li>
  </ol>