jQuery set select box to empty option
<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>