how to populate the second drop down using the selected value in first drop down?
<p>Say I have two drop downs which are populated when the my jsp loads</p>

<pre><code> &lt;select id="Group" name="group"&gt; -- first drop down
    &lt;option value="0001"&gt;1&lt;/option&gt;
    &lt;option value="0002"&gt;2&lt;/option&gt;
 &lt;/select&gt;

 &lt;select id="subGroup" name="class"&gt; -- second drop down
    &lt;option value="0001-000"&gt;A&lt;/option&gt; -- sub group associated with option value 001
    &lt;option value="0001-010"&gt;B&lt;/option&gt;
    &lt;option value="0001-020"&gt;C&lt;/option&gt;
    &lt;option value="0001-030"&gt;D&lt;/option&gt;
    &lt;option value="0001-040"&gt;E/option&gt;
    &lt;option value="0002-000"&gt;F&lt;/option&gt; -- sub group associated with option value 002
    &lt;option value="0002-010"&gt;G&lt;/option&gt;
    &lt;option value="0002-020"&gt;H&lt;/option&gt;
    &lt;option value="0002-040"&gt;I&lt;/option&gt;
  &lt;/select&gt;
</code></pre>

<p>Now I need to filter the second drop down based on the selected value in first drop down. I can't use the PHP code which uses the DB callback methods. in my script I have something like this.</p>

<pre><code>   $("#Group").change(function() {
     var groupVal = $(this).find("option:selected").val();
     $('#subGroup option').filter(function( {return!$(this).val().indexOf(groupVal)!=-1);}).remove();
    });
</code></pre>

<p>the script is working fine, it removes all the options other then the one selected. but my problem is that next time when i select other value in first drop down, second drop down goes empty. I even worked with hide/show but guess they wont work with <code>&lt;select&gt;</code> :( </p>

<p>is there any way by which I can repopulate the second drop down when I selected some other option in first drop down?</p>
