Adding another dropdown list to a form with jQuery
<p>I'm trying to add another dropdown list to a form once an option is selected in the first dropdown.</p>

<p>So below is part of the form. When the dropdown with the name is selected, in this case there are 3 classes, EDMATH 502, EDTECH 401, Math 101, I want different image IDs to appear in the next dropdown ("image_os_image_id"). The idea being that each class has access to different images.</p>

<p>I know this is a job for jquery, but I am having a heck of a time figuring out how to do that. I have searched quite a bit, but am stymied a bit by either poor searching or the fact that I always seem to come up with hits for adding another option to a list, not adding another list.</p>

<pre><code>&lt;div class="control-group"&gt;
    &lt;label class="control-label" for="select01"&gt;Class&lt;/label&gt;
    &lt;div class="controls"&gt;
        &lt;select id="select01" name="class_name"&gt;
            &lt;option value='EDMATH 502'&gt;EDMATH 502&lt;/option&gt;
            &lt;option value='EDTECH 401'&gt;EDTECH 401&lt;/option&gt;
            &lt;option value='Math 101'&gt;Math 101&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
    &lt;!-- class --&gt;
&lt;/div&gt;
&lt;div class="control-group" &lt;/div&gt;
    &lt;label class="control-label" for="select01"&gt;Image&lt;/label&gt;
    &lt;div class="controls"&gt;
        &lt;select id="select01" name="image_os_image_id"&gt;
            &lt;option value='647abf63-fd95-42a7-a744-e1885f8d5c16'&gt;photoshop&lt;/option&gt;
            &lt;option value='0f53de4a-1bb6-43bd-a567-fe181b25cfbe'&gt;matlab&lt;/option&gt;
            &lt;option value='647abf63-fd95-42a7-a744-e1885f8d5c16'&gt;photoshop&lt;/option&gt;
            &lt;option value='0f53de4a-1bb6-43bd-a567-fe181b25cfbe'&gt;matlab&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
    &lt;!-- image --&gt;
&lt;/div&gt;
&lt;!-- control group --&gt;
</code></pre>

<p>Thanks for any help!</p>
